1 vue-cli 简介及安装

1 什么是cli

CLI一般指命令行界面。（command-line interface，缩写：CLI）

 

2 什么是vue-cli

文档：https://cli.vuejs.org/zh/guide/
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。即：使用了vue脚手架之后，开发的页面将是一个完整的系统

vue-cli 搭建交互式的项目脚手架。通过执行命令方式下载相关的依赖（相当于maven、pip）

vue-cli 实现快速的零配置原型开发。脚手架包含了vuejs、vuerouter，axios（一条命令安装）、

一个运行时依赖 (@vue/cli-service)，该依赖：
1 可升级；一条命令搞定升级
2 基于 webpack 构建，并带有合理的默认配置；webpack 是项目打包方式，打包好后快速拿到源码，部署到服务器上使用
3 可以通过项目内的配置文件进行配置；修改配置文件达到想要的环境
4 可以通过插件进行扩展：图标vue v-charts、element-ui

一个丰富的官方插件集合，集成了前端生态中最好的工具。服务器nodejs（tomcat）、前后端分离vue+vuerouter、打包webpack

 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 可以用webstorm开发

 

3 安装

• 安装nodejs

下载地址：http://nodejs.cn/

下载内容：
Windows 安装包(.msi)，相当于.exe文件，需要指定安装位置
Windows 安装包(.zip)，解压即可使用，需要指定安装位置

安装参考：https://www.runoob.com/nodejs/nodejs-install-setup.html

配置nodejs环境变量
path中添加安装路径：如：C:\Program Files\nodejs\

验证
C:\Users\test>node -v
v14.16.0

• npm介绍

nosdjs安装成功后，自带npm（node package manager）相当于pip
前端主流技术都可以用npm进行统一管理，管理前端系统以来
npm也有远程仓库，仓库在国外，建议配置淘宝镜像（cnpm）
修改镜像：
修改淘宝镜像：npm config set registry http://registry.npm.taobao.org/
查看是否成功：npm get registry

配置npm下载依赖的位置：
参考：https://www.cnblogs.com/wuyicode/p/11404897.html
查看默认为位置：npm config ls（HOME = C:\Users\test）
修改下载位置：
npm config set cache "D:\nodereps\npm-cache"
npm config set prefix "D:\nodereps\npm_global"
验证配置：
npm config ls
    结果：
    ; userconfig C:\Users\test\.npmrc
    cache = "D:\\nodereps\\npm-cache"
    prefix = "D:\\nodereps\\npm_global"
    registry = "https://registry.npm.taobao.org/"

• 安装脚手架

2.0版本参考：
https://github.com/vuejs/vue-cli/tree/v2#vue-cli--

卸载脚手架：
npm uninstall -g @vue/cli(卸载3版本脚手架)
npm uninstall -g vue-cli(卸载2版本脚手架)

安装脚手架：
npm install -g vue-cli
安装webpack：
npm install -g webpack

• 安装element-ui

cd 到项目根目录执行
npm i element-ui -S

•  使用element-ui

在main.js中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)