生成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的组件