Vue-cli 安装

一、Vue-cli是什么？

vue-cli是vue的脚手架工具，也就是帮助构建vue的工具（包括目录结构，代码部署，但愿测试等）

command-line-interface

二、前台=前端（vue.js）+后端（node.js+共享变量 +页面的调用）、后台=后台

三、安装过程，配置环境

1、安装node.js

https://nodejs.org/en/download/

下一步，下一步直到完成。要注意安装的路径。安装之后检查是否安装成功。

开始按钮--cmd--输入node -v (是否出现版本号)

配置环境变量: 我的电脑--右键属性--系统属性--配置环境，将node.js安装的文件夹路径复制，粘贴到环境变量配置链接的最前面，";"号分隔

注意：一定不要碰其它的配置，否则电脑有些软件会出现问题。

好处：任何位置都可以使用node.js的内容。再重新打开cmd界面才能好用， 执行 node -v，npm -v 查看版本号就没有问题了。安装了node就安装了npm

常用的dos命令

cd 打开文件夹

md 创建新的文件夹

dir 查看文件夹内容

cd.. 返回上一层文件夹

d: 切换成D盘

cls 清理屏幕

ctrl+c 终止

2、安装npm, cnpm的区别（node不用会，这个必须会）

作用：node package manager (是node.js的包管理器，用于node的插件管理，包括安装，卸载，管理依赖等)

npm和cnpm作用是一样的，只是安装的原路径不一样，只不过因为npm安装插件是从外国的服务器下载，受网络影响大，可能出现异常，

cnpm的淘宝团队分享一个国内的镜像来代替国外的镜像，和npm的内容是一样的。语法也是一样的，只是一个是npm开头,另一个是cnpm开头。

3、安装vue-cli（安装的脚手架名称，并不是项目名称，是固定的）

-v版本信息
-g全局安装
npm root -g 查看全局安装的文件夹位置

-S， --save 安装包信息将加入到dependencies(生产阶段的依赖) （也就是项目已经完成，已经发布了）
-D, --save--dev 安装包信息将加入到devDependencies(开发阶段的依赖)（适用于开发，也适用于发布，所以一般大家都用它）
i是install 的缩写（注意：前面没有“-”）
注意：大小写无要求，缩写，全称都可以

国外的服务器

npm install -gd vue-cli（全局,开发和生产阶段）

npm install -d vue-cli（本地,开发和生产阶段）

npm init -f（本地安装出错误，是因为没有初始化，执行这段代码）

执行完之后在文件里会发现package.json文件

淘宝镜像（两种方法）

npm install -gd express --registry=http://registry.npm.taobao.org(手动指定从哪个镜像服务器获取资源)

为了避免每次安装都需要--registry参数，可以使用如下命令进行永久设置
npm config set registry=http://registry.npm.taobao.org
然后用npm命令就可以直接从淘宝镜像上获取资源了，适合经常练习，需要反复安装的时候
npm install -g vue-cli

npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm install -g vue-cli
cnpm -v
vue -V

4、创建项目，一般用webpack模版(webpack模版使用频率最高)

vue init webpack projectName
注意：项目名字必须是小写

5、手动干预设置项目名称，项目描述，vue-router->yes（路由的选择）, ESLint(风格的管理) 剩下的都yes.

6、根据系统提示，启动后端的node.js服务。每次开机的时候，都要启动node.js.

cd test1
npm run dev

7、出现一个地址：http://localhost:8080, 复制链接，在浏览器窗口打开。