1. 概述
1.1 说明
使用vue-cli快速创建的vue项目目录如下:
1.2 build
1.3 config
config文件夹下的文件目录如下:
1.4 .editorconfig
代码规范化编辑可以帮助我们简单整洁的展示代码结构,而.editorconfig文件就是对代码规范设置的一个文档。使用编辑器/IDE打开项目时编辑器会自动寻找.editorconfig文件,然后根据其内容配置去显示相关的项目代码文件。
2. 项目页面开发
2.1 index.html
项目页面入口(可删除),通常是进行根节点功能设置,如需要引用静态资源文件夹static中的文件时,建议在index.html中进行引入;手机端文件在此文件中更改viewport等。
2.2 App.vue
app.vue时项目的主组件,所有页面都是在app.vue下切换的(基于此组件,若多页面的则不是)。其中<router-view/>是子路由视图。
2.3 main.js
main.js是入口文件,主要作用是初始化vue实例并使用需要的插件。使用某些插件使用Vue.use(xxx)。
2.4 router
路由配置文件,地址为src>router>index.js。可进行自定义配置,然后引入到main.js中,加入至vue实例。
2.5 store(vuex)
自己增加文件,作用为数据仓库,对项目中公用数据进行设置存储。
3. webpack
webpack是当下最热门的前端资源模块化管理工具和打包工具,可以将很多松散的模块按照一定的规则打包成符合生产环境的前端资源,同时具有按需加载,等到实际需要的时候进行异步加载。通过loader的转换,在项目中任何形式的资源都可以被理解为模块,比如img,css,js等。
3.1 webpack.base.conf.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
|
3.2 开发环境相关
3.2.1 webpack.dev.conf.js
1 2 3 4 |
|
3.2.2 styleLoaders/cssLoader(until.js)
styleLoader配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
cssLoaders配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
|
3.2.3 plugins
webpack.dev.conf.js下的plugins。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
3.3 生产环境相关
3.3.1 webpack.prod.conf.js
生产环境下的webpack配置,通过merge方法合并webpack.base.conf.js基础配置。
1 2 3 4 5 6 7 8 9 10 |
|
3.3.2 webpack.prod.conf.js——module
module主要是针对css的处理,调用了utils.styleLoaders
1 2 3 4 5 6 7 |
|
3.3.3 webpack.prod.conf.js——output
输出文件的文件目录/文件名等的设置
1 2 3 4 5 |
|
3.3.4 webpack.prod.conf.js——plugins(插件)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
|
3.3.5 webpack.prod.conf.js——额外配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|