项目创建

vue-cli3+vue2项目

1.创建项目命令：vue create app

2.vue.config.js文件关闭eslint配置

module.exports = {
  transpileDependencies: true,
  lintOnSave: false
}

3.jsconfig.json文件配置别名

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

4.项目采用less样式，浏览器不识别less样式，需要通过less，less-loader（安装5版本）进行处理less，把less样式变为css样式

cnpm install --save less@3.0.4  less-loader@5

注意：组件要想识别less样式，需要在style标签加上lang="less"

 

5.使用组件的步骤（非路由组件）

• 创建或定义
• 引入
• 注册
• 使用

6.安装vue-router

cnpm install --save vue-router@3

 

 

 

 

 

声明式：

<router-link to="/login">登录</router-link>

编程式：

 <button type="button" @click="goSearch">搜索</button>

methods:{
      goSearch(){
        this.$router.push('/search')
      }
    }