Vue之vue-cli新和旧版本代码生成的项目区别

记录下文章地址: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 run npm 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创建后文件结构
在这里插入图片描述
结构介绍:
在这里插入图片描述

おすすめ

転載: blog.csdn.net/qq_40286424/article/details/113346767