Vue环境搭建(vue-cli3创建项目)

一、安装node.js（https://nodejs.org/en/）

    注意:推荐使用 node-v8.11.0-x64,具体安装步骤下一步即可

二、设置nodejs prefix（全局）和cache（缓存）路径

    1、在nodejs安装路径下，新建node_global和node_cache两个文件夹

image.png

    2、设置缓存文件夹和全局模块存放路径
          npm config set cache "D:\application\nodejs\node_cache"
          npm config set prefix "D:\application\nodejs\node_global"

三、基于 Node.js 安装cnpm（淘宝镜像）以及升级npm至最新版本

    1、npm install -g npm                                                                        --- 升级npm到最新版本
    2、npm install -g cnpm --registry=https://registry.npm.taobao.org    --- 安装cnpm（淘宝镜像）

四、设置环境变量（非常重要）

    1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
    2、修改系统变量PATH

image.png

   3、新增系统变量NODE_PATH

image.png

五、安装vue命令行工具，即vue-cli3 脚手架

  1、vue-cli3 访问地址: [https://cli.vuejs.org/guide/installation.html](https://cli.vuejs.org/guide/installation.html)
  2、安装命令: npm install -g @vue/cli  # OR  yarn global add @vue/cli
  3、注意:如果事先安装 vue-cli 则可以使用 npm uninstall vue-cli -g 卸载
        a:vue-cli     对应的版本(2.x..) 
        b:@vue/cli 对应的版本(3.x..) 
  4、输入vue --version 查看版本即可

六、采用vue-cli3 脚手架创建Vue项目

  1、运行 vue ui

image.png

  2、省略(界面是中文界面,按照流程下一步操作即可)
  3、目录结构简易描述

image.png

七、运行Vue项目

  1、运行  npm run serve 指令即可

image.png

八、细节注意事项

  - 注意在安装vue-cli3 并查看版本的时候不是3.x版本而是2.x(2.9.6等)
  - 解决办法:在安装Node.js的时候使用 【推荐版本即可 = node-v8.11.0】