windows系统搭建VUE环境(vue-cli4)

在前面的vue入门中，不管是vue,router,vuex我们都是通过传统的<script>标签引入的，对于简单的项目这样就足够了。

对于较复杂的项目，我们介绍了用webpack构建项目，webpack配置笔记繁琐，实际上主流的前端框架都有相应的cli帮助快速搭建环境，Vue CLI 就是一个基于 Vue.js 进行快速开发的完整系统。

安装vue cli

node环境安装

Node.js 就是运行在服务端的 JavaScript,vue/cli 脚手架依赖Node,如果本机没有安装node运行环境，请下载node 安装包进行安装。
Node.js默认安装目录为 “C:\Program Files\nodejs”,这里修改为"D:\nodejs"

最新版本：https://nodejs.org/en/ 或者 http://nodejs.cn/能够下载到最新版的node
指定版本：https://nodejs.org/dist/ ,https://npm.taobao.org/mirrors/node/可以下载指定版本的node
Node.js的卸载方法

node环境检测

node -v

如果输出版本号，说明我们安装node 环境成功

快捷键Windows+R打开运行窗口,在里面输入cmd确定就能打开命令窗口

查看 npm 的 版本号

NPM(Node Packaged Modules)是随同Node.JS一起安装的包管理工具，是Node.js的包管理器。
NPM的含义有两层,一个是NPM命令npm CLI，指在命令行窗口或终端使用npm命令来管理node包（模块），开发者可以使用npm命令下载、安装、升级、删除包等。
另一个是NPM服务器，NPM服务器网址为http://npmjs.org，NPM是 Node 包的标准发布平台，用于 Node 包的发布、传播；

• 允许用户从NPM服务器下载别人 编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

npm 中文文档

安装指定版本npm

npm install npm@6.0.0

设置nodejs的global和cache路径（可选）

设置路径能够把通过npm安装的模块集中在一起，便于管理。 在nodejs的安装目录D: \nodejs下，新建node_global和node_cache两个文件夹，设置node_global为全局模块存放路径,设置node_cache为缓存文件夹。
在命令窗口执行指令：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

设置成功后，后续用命令全局安装的模块会保存在在D: \nodejs \node_global \node_modules里。
也可以在下面命令的弹出窗口中直接修改

npm config edit

查看配置信息的指令：

npm config list

设置淘宝镜像

访问外网比较慢，可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端输入：

npm config set registry https://registry.npm.taobao.org

可以通过下面的命令查看淘宝镜像是否安装成功

npm config get registry

如果打印出https://registry.npm.taobao.org/证明安装成功
PS:建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

全局安装vue-cli

npm install -g @vue/cli

查看vue-cli的版本

vue -V

我安装的版本是@vue/cli 4.5.4

配置PATH环境变量

如果在命令行窗口出现使用vue命令，提示'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件。,则需要配置PATH环境变量，将D:\nodejs\node_global添加到Path中。

PATH环境变量的作用是指定命令搜索路径,在命令行种执行命令时,会到PATH变量所指定的路径中查找,看是否能找到对应的cmd可执行文件。

下面介绍的是windows10中配置环境变量的方法，windows7中到第6步中会发现路径是通过;(分号)分隔的，可以通过相同的方法，将我们的路径添加到最后。

1. 在电脑找到“计算机”；
2. 鼠标右键单击“计算机”图标，找到“属性”；
3. 打开“属性”之后，找到“高级系统设置”，打开“高级系统设置”；
4. 打开“高级系统设置”之后，找到“环境变量”；
5. 打开“环境变量”之后，在“系统变量”中找到“Path”；
6. 找到“Path”之后，选中“Path”，点击下边的“编辑”；
7. 编辑环境变量窗口中，填写D:\nodejs\node_global，确定即可

创建第一个项目hello-world

运行以下命令来创建一个新项目

vue create hello-world

这里先选择默认的设置default(babel eslint)
创建成功后，自动生成的目录结构见下图

要理解这个结构需要有webpack的知识，请见webpack4打包项目入门
vue-cli4提供了图形化界面构建项目,能够以图形化界面创建和管理项目，命令是

vue ui

启动项目

进入项目安装目录，运行命令

npm run serve

如果在浏览器中能够看到这个界面，那么恭喜你，成功了。

配置项目参数

与package.json文件同级的目录中新建文件vue.config.js来配置项目的参数

module.exports = {
  publicPath: '/', // 默认'/'项目部署在域名的根部
  outputDir: 'dist', // 将构建好的文件输出到dist文件夹
  // 配置 webpack-dev-server 行为。
  devServer: {
    port: 3000 // 端口
  }
  
}

再次执行命令

npm run serve

浏览器中输入网址http://localhost:3000，就能够访问到这个项目了