记录下文章地址:http://www.voycn.com/article/chuangjianvuexiangmuqubie-vue-cli-30yuvue-cli-20
创建项目结构区别
vue-cli 2.0创建步骤
PS D:\Web前端\vue项目\Clistudy> vue init webpack vue-cli-2.0
? Project name vue-cli-2.0-study
? Project description vue cli 2.0 study-vue.js
? Author Keven Li
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we runnpm install
for you after the project has been created? (recommended) npm
vue-cli 3.0创建步骤
PS D:\Web前端\vue项目\Clistudy> vue create vue-cli-3.0
Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press to select, to toggle all, to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
vue-cli 2.0创建后文件结构
创建vue项目区别->vue-cli 3.0与vue-cli 2.0
1、build 文件夹:webpack的一些相关配置;
2、config 文件夹:项目开发环境和生产环境的一些相关配置;
3、node_modules 文件夹 :这里存放的是安装包,比如webpack、第三方插件库、项目的依赖文件;
4、src 文件夹:我们将要写的代码放在这里面,打包上线时会进行编译、压缩等操作。
5、static 文件夹:一些静态文件比如图片、css文件、不需要进行压缩的js文件,打包时将原封不动的放到dist(打包时自动生产的文件夹)文件夹下面。
6、.babelrc 文件:ES6语法编译配置,主要是将ES 转成ES 需要适配那些浏览器
7、.editorconfig 文件:定义代码格式,对代码的风格进行一个统一。
8、.gitignore 文件:git上传需要忽略的文件格式
9、.postcssrc.js 文件:postcss配置文件
10、 index.html 文件:要进行访问的首页面
11、package-lock.json 文件:锁定依赖模块和子模块的版本号
12、package.json 文件:项目基本信息,包依赖信息等
13、README.md 文件:项目说明文件
vue-cli 3.0创建后文件结构
结构介绍: