项目创建
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')
}
}