Vue教程(三十九)vue-cli2脚手架安装

Posted 2021-09-06 _否极泰来_

Vue教程(三十九)vue-cli2脚手架安装

Vue CLI介绍

CI是 Command- Line interface，翻译为命令行界面，但是俗称脚手架。VueCL是一个官方发布 vue.js项目脚手架，使用vue-cli可以快速搭建vue开发环境以及对应的 webpacki配置。

安装NodeJS

可以直接在官方网站中下载安装：[http://nodejs.cn/donwload](http://nodejs.cn/donwload)

检查p安装的版本，版本要求8.9以上或者更高的版本

node -v

什么是NPM

NPM的全称是 Node Package Manager
是一个 Nodes包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

Webpack介绍与安装

Vuejs官方脚手架工具就使用了 webpack模板。Webpack对所有的资源会压缩等优化操作，它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。

Webpack安装命令：

npm install webpack -g

安装Vue脚手架3

npm install -g @vue/cli@3.2.1
# OR
yarn global add @vue/cli@3.2.1

安装Vue脚手架 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

• 创建Vue脚手架2.x项目

vue init webpack vuecli2

## 项目名称，不能包含大写
? Project name vuecli2
## 项目描述
? Project description vue cli2 demo
## 作者的信息,会默认从git中读取信息
? Author [e-mail]
## Runtime + Compiler: recommended for most users(**standalone**)
## Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific html) are ONLY allowed in .vue files - render functions are required elsewhere
? Vue build standalone
## vue-router路由
? Install vue-router? No
## ESLint 检测代码规范
? Use ESLint to lint your code? Yes
## ESLint 标准
? Pick an ESLint preset Standard
## 是否使用单元测试
? Set up unit tests No
## e2e测试, end to end 安装 Nightwatch,是一个利用 selenium或webdriver或 phantoms等进行自动化测试的框架
? Setup e2e tests with Nightwatch? No
## 选择用yam或者npm安装
? Should we run `npm install` for you after the project has been created? (recommended) npm

    – 以上为《Vue教程(三十九)vue-cli2脚手架安装》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)