生成webpack模板
如果已经安装了vue-cli，在项目根目录所在的目录下，执行下面命令。
vue init webpack my-project
如果没有安装vue-cli，可以在执行上面命令之前先执行下面的命令。
npm install --global vue-cli
默认代码结构
README.md --- 项目说明文件
package.json --- 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。
package-lock.json --- 会自动为npm修改node_modules树或任何操作而生成package.json
LICENSE --- 开源协议
index.html --- 项目默认首页模板
.postcssrc.js --- 是对postcss的一个配置项
.gitignore --- git提交忽略文件清单
.eslintrc.js --- 里面配置了一些代码的规范，如果不按照规范写，会提示报错。
.eslintignore --- 指定不需按照eslint语法书写代码的文件清单
.editorconfig --- 指定了编辑器的一些配置项
.babelrc --- 语法解析器，将我们的代码转换成浏览器识别的语法
static --- 静态资源文件存放位置
node_modules --- 放的是项目依赖的一些第三方的包。
main.js --- 整个项目的入口文件
App.vue --- 根组件
router/index.js --- 路由管理配置文件
components --- 项目中的一些组件
assets/ --- 项目中用到的一些图片资源
config/ --- 放置的是项目的配置文件, 基础信息放在index.js中，开发环境配置信息dev.env.js，线上环境配置信息prod.env.js
build/ --- 项目打包用的配置项
结构调整：
一、将/compontents目录删除，添加目录结构/pages，然后当开发一个页面的时候，如home页面，我们创建一个/pages/home/Home.vue和/pages/home/compontents进行开发，compontents目录下放的是home页中的组件，如Header.vue等等。
二、创建/src/common目录，然后里面放公共的组件，例如画廊组件，我们创建一个/src/common/gallary/Gallary.vue和/src/common/gallary/compontents进行开发，compontents目录下放的是gallary的组件
网友评论