本文参考其他文章自己整理补充的,要阅读原文请查看:尚品汇项目笔记_爱哭的毛毛虫的博客-CSDN博客_尚品汇项目
1、vue文件目录
public文件夹:静态资源,webpack进行打包的时候会原封不动打包到dist文件夹中。
pubilc/index.html是一个模板文件,作用是生成项目的入口文件,webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。
src文件夹
1.assets:存放公用的静态资源
2.componets:存放非路由组件(全局组件),其他组件放在views文件夹中,路由组件放入pages文件夹中
3.App.vue:唯一的根组件
4.main js:项目入口文件,最先执行的文件
babel.config.js: 配置文件(babel相关)
package.json: 项目的详细信息记录
package-lock.json: 缓存性文件(各种包的来源)
2、项目配置
2.1 项目运行,浏览器自动打开
package.json
"scripts": {
"serve": "vue-cli-service serve --open", //--open自动打开
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
//或者在vue.config.js文件中设置
module.exports = {
open:true
}
2.2 关闭eslint校验工具(不关闭会烦人的代码规范,不按照规范就会报错)
在根目录中创建vue.config.js文件
module.exports = {
//关闭eslint
lintOnSave: false
}
3、组件页面样式
组件页面的样式使用的是less样式,浏览器不识别该样式,需要下载相关依赖npm install --save less less-loader@5
如果想让组件识别less样式,则在组件中设置<script scoped lang="less">
4、清除vue页面默认的样式
vue是单页面开发,我们只需要修改public下的index.html文件,引入清除样式的css文件
<link rel="stylesheet" href="reset.css">
5、pages文件夹
创建pages文件夹,并创建路由组件
5.1创建router文件夹,并创建index.js进行路由配置,最终在main.js中引入注册
5.2 总结
路由组件和非路由组件区别:
- 非路由组件放在components中,路由组件放在pages或views中
- 非路由组件通过标签使用,路由组件通过路由使用
- 在main.js注册玩路由,所有的路由和非路由组件身上都会拥有$router $route属性
- $router:一般进行编程式导航进行路由跳转
- $route: 一般获取路由信息(name path params等)
5.3 路由跳转方式
- 声明式导航router-link标签 ,可以把router-link理解为一个a标签,它 也可以加class修饰
- 编程式导航 :声明式导航能做的编程式都能做,而且还可以处理一些业务