4.1 什么是脚手架（CLI）

Vue CLI叫做脚手架。CLI：Command-Line Interface，翻译为命令行界面，俗称脚手架。

如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI。使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。

使用条件：Node8.9以上版本、NPM

如果安装过慢，可以安装淘宝镜像，通过cnpm安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用cnpm命令来安装模块了。

安装脚本架

npm install -g @vue/cli 上面安装的是Vue-CLI3,安装脚手架3后，也可以使用Vue-CLI2项目

如果想创建Vue-CLI2项目

npm install @vue/cli-init -g

安装以后，通过以下命令创建Vue-CLI2项目

vue init webpack myProject 创建Vue-CLI2项目。（vue create myProject 创建Vue-CLI3项目）

yarn也是包管理工具。早期npm不好用，有几家大公司推出yarn代替npm，随着npm升级，npm已比较好用。这时有些人用npm,有些人用yarn。

创建Vue-CLI2项目

Use ESLint to lint your code? 选择是否使用ESLint规范。我们选择Yes后出现

Standard (https://github.com/standard/standard) 此项为标准规范
Airbnb (https://github.com/airbnb/javascript) 此项为使用Airbnb公司规范
none (configure it yourself)

Set up unit tests

询问是否安装单元测试，依赖测试框架，用的比较少，选择No

Setup e2e tests with Nightwatch?

e2e即end to end，中文为端至端。询问是否使用Nightwatch进行端到端测试。Nightwatch是一个利用selectnum进行自动化测试的框架。直接选择No。

选择包管理工具NPM和Yarn，一般选择NPM。

Vue-CLI2项目目录

build和config 都是配置文件目录，config里面定义了大量的变量。
node_modules 存储本地信赖文件
src 用户写代码的文件夹
static 用户使用到的资源，会原封不动复制到dist文件夹里面的.gitkeep表示该目录会上传到git服务器.
.babelrc文件如果安装了babel-preset-env模块依赖，就会生成.babelrc文件
.editorconfig 对代码风格进行设置
.eslintignore 指定忽略eslint检查的目录或者文件
.gitignore 忽略上传git服务器的目录或者文件
.eslintrc 代码检测的配置文件
.postcssrc CSS转化的配置文件，一般不用动
index.html 模板文件
package-lock.json "^6.22.1",中的^指安装大于最右侧位置的版本号；"~6.22.1",中的~指安装大于中间位置的版本号；package-lock记录真实安装的版本。

4.1 什么是脚手架（CLI）相关推荐

Vue 脚手架CLI 初始化项目
1 介绍 CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架. Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及 ...
npm 全局安装vuecli报错_前端脚手架CLI生成模版命令工具（包括，npm包的发布，脚手架的搭建，注意事项，优化等）...
NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近.先是带来了Gulp.Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了 ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
整理全菜30篇学习vue和脚手架的笔记
一种 vue element 技术栈刷新 echarts 图表的实现方法一种 vue element 技术栈刷新 echarts 图表的实现方法 \r\n\r\n# 方法\r\n\r\n将 echa ...
Vue笔记_03_使用Vue脚手架
Vue笔记_03_使用Vue脚手架第三章使用Vue脚手架初始化脚手架说明具体步骤项目文件分析 pack-lock-json assets文件夹 components文件夹 main.js ...
TypeScript笔记（3）—— 使用WebPack工具
TypeScript(3): 使用WebPack工具作者:李俊才 CSDN:jcLee95 邮箱:291148484@163.com 专题目录:https://blog.csdn.net/qq_28 ...
【小程序】384- 如何一人五天开发完复杂小程序（前端必看）
随着业务需求的不断累加.小程序追求快速产出. 在人手不足且开发周期较短的情况下,我们需要找到一个最大化开发效率的方法. 而高效率的开发离不开规范化.工程化.组件化. 为此整理写下总结,细数小程序中的坑 ...
全栈工程师之路-Node.js
2019独角兽企业重金招聘Python工程师标准>>> 全栈工程师之路-Node.js 高可用架构专用原文[高可用架构] https://mp.weixin.qq.com/s?__ ...
vue开发单页面应用
今天我们看看VUE怎么开发单页面应用,VUE提供了脚手架vue-cli,通过这个可以很轻松的创建VUE单页面应用, 1.创建VUE项目首先确保电脑上安装了NODE.JS, 在创建项目的目录下,打开 ...

4.1 什么是脚手架（CLI）

4.1 什么是脚手架（CLI）相关推荐

最新文章

热门文章