尚硅谷VUE项目-前端项目问题总结01
1 创建项目
vue create app
vue cli 版本在3以下的，需要升级，create是3的用法
npm uninstall -g vue-cli
npm install -g @vue/cli
npm install -g @vue/cli@4.5.13
注意：要用Vue CLI v4.5.13
视频里Vue CLI v4.5.13 我安装时是Vue CLI v5.0.1，配置自动打开浏览器–open时有问题，所以还是用视频中的版本吧
2 打开项目，自动打开浏览器
$ cd app
$ npm run serve
在package.json -->scripts中 添加–open
// "serve": "vue-cli-service serve",
"serve": "vue-cli-service serve --open",//浏览器自动打开
3 脚手架使用
创建项目的两种方法：
vue init webpack 项目的名字
vue create 项目名称
脚手架目录:public + assets文件夹区别
node_modules:放置项目依赖的地方
public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
src：程序员源代码文件夹
-----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
-----components文件夹:一般放置非路由组件（或者项目共用的组件）
App.vue 唯一的根组件
main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件
package.json：看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件
脚手架下载下来的项目稍微配置一下
3.1:浏览器自动打开
在package.json文件中
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
3.2关闭eslint校验工具
创建vue.config.js文件：需要对外暴露
module.exports = {
lintOnSave:false,
}
3.3 src文件夹的别名的设置
(jsconfig.json 是给 vscode 配置的，如果有 Vetur 插件的话，也会读这个文件。项目里的路径别名是在 webpack 里配置的)
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件，放在根目录
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
如果报错 将设置中的check JS勾上
左下角齿轮->设置->JS/TS Strict Null Checks？？？
重启
4 项目介绍
4.1静态页面、样式、清除默认样式引入
复制静态资源页面（HTML+CSS）到项目中,项目中用的是less，需要安装less和less-loader
cnpm install --save less less-loader@5
并在style上添加
<style lang="less" scoped></style>
reset.css文件一般放在public下，并引入
5 路由组件的搭建
安装vue-router
//视频中用的版本3.5.3
cnpm install --save vue-router
cnpm install --save vue-router@3.5.3
cnpm install --save vue-router@3
pages或者assets中写路由组件
router中配置路由
//配置路由的地方
import Vue from "vue";
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter)
//引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//配置路由
export default new VueRouter({
//配置路由
routes:[
//重定向
{
path:'*',
redirect:'/home',
},
{
path:'/home',
component:Home,
},
{
path:'/search',
component:Search,
},
{
path:'/login',
component:Login,
},
{
path:'/register',
component:Register,
},
]
})
在入门文件main.js注册router
//注册路由信息，当这里书写router时，组件身上都拥有$route, $router属
import Vue from 'vue'
import App from './App.vue'
// Vue.config.productionTip = false
import router from '@/router'
new Vue({
render: h => h(App),
//注册路由：底下的写法是kv一致省略v，切router小写
//注册路由信息，当这里书写router时，组件身上都拥有$route,$router属性
router,
}).$mount('#app')
在app.vue中加入路由出口 router-view
注意：路由组件以router-view出现，非路由以标签形式(Header) 出现
<template>
<div id="app">
<Header></Header>
<!-- 路由出口 -->
<router-view></router-view>
<Footer></Footer>
</div>
</template>
<script>
// 非组件路由在这里引入，组件路由在router引入
import Header from './components/Header'
import Footer from './components/Footer'
export default {
name: 'App',
components: {
Header,
Footer,
}
}
</script>
<style scoped>
</style>
6 路由组件，路由跳转 总结
//声明式导航
<router-link to="/login">登录</router-link>
<router-link class="register" to="/register">免费注册</router-link>
<router-link class="logo" to="/home">
<img src="./images/logo.png" alt="" />
</router-link>
//编程式导航
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch"> 搜索 </button>
goSearch(){ this.$router.push('/home')},
7 v-if 和v-show
路由元信息:配置路由时，meta
<Footer v-show="$route.meta.show"></Footer>
这里如果v-show不生效，可在footer上套一个div来进行v-show就可以正常显示了
首页|搜索底部是有Footer组件，而登录注册是没有Footer组件
Footer组件显示|隐藏，选择v-show|v-if
路由元信息meta
面试题:v-show与v-if区别?
v-show:通过样式display控制
v-if：通过元素上树与下树进行操作
面试题:开发项目的时候，优化手段有哪些?
1:v-show|v-if
2:按需加载
