1.10

 

# 初始创建
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：看到项目描述、项目依赖、项目运行指令(可以查看vue版本)
        README.md:项目说明文件
cmd中 vue -V 查询脚手架版本(5.0.8)  
# 配置
1:浏览器自动打开
        在package.json文件中
        "scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

2.关闭eslint校验工具
创建vue.config.js文件：需要对外暴露
```javascript
module.exports = {
   lintOnSave:false,
}
```
3.src文件夹的别名的设置(@代表src文件夹)
创建jsconfig.json文件
```json
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}
```
# 路由
1.npm install --save vue-router@3(插件库) 需要在vue2中安装3版本的路由 
2.创建路由组件【一般放在views|pages文件夹】
3.新建文件夹router(index.js)创建路由器 路由规则 在main.js里引入路由 路由器
main.js
```javascript
import VueRouter from 'vue-router'
//使用
Vue.use(VueRouter)
//引入创建的路由器
import router from './router'
```
index.js
````javascript
//创建一个路由器 
import VueRouter from "vue-router";
//引入路由组件
//配置路由规则  VueRouter本质是构造函数
export default  new VueRouter({
    //路由
    routes: [
        {},
        {},
        {},
        {}
    ]
})
````
4.路由的一个分析
两个非路由组件：Header 、Footer
路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）
5.创建非路由组件（2个：Header、Footer）
**非路由组件使用分为几步**
第一步：定义
第二步：引入
第三步：注册
第四步: 使用
6.**注册完路由后 路由组件 非路由组件上都有$route $router**

```javascript
$router:进行编程式导航的路由跳转
this.$router.push|this.$router.replace
$route:可以获取路由的信息|参数
this.$route.path
this.$route.params|query
this.$route.meta
```
7.项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法
**安装less less-loader@7**
切记less-loader安装5版本的，不要安装在最新版本，安装最新版本less-loader会报错，报的错误setOption函数未定义
**需要在style标签的身上加上lang="less",不添加样式不生效**

8.路由的跳转
路由的跳转就两种形式：声明式导航（router-link：务必要有to属性）
                     编程式导航push||replace
编程式导航更好用：因为可以书写自己的业务逻辑


9.路由传参
params参数：路由需要占位，程序就崩了，属于URL当中一部分
query参数：路由不需要占位，写法类似于ajax当中query参数
  

创建路由器 路由规则 

//创建一个路由器 
import VueRouter from "vue-router";
//引入路由组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
//配置路由规则  VueRouter本质是构造函数
export default  new VueRouter({
    //路由
    routes: [
        {
            path: '/home',
            component:Home
        },
        {
            path: '/login',
            component:Login
        },
        {
            path: '/Register',
            component:Register
        },
        {
            path: '/Search',
            component:Search
        },
        //重定向:项目跑起来的时候 立刻定向访问哪里
        {
            path: '*',
            redirect:'/home'
        }
    ]
})