vue项目之环境搭建（一）

近日，有项目前端用到vue.js，之前没接触过，加班加点赶进度，初窥门径，把这个过程及经验记录下来，免得忘了。
一、环境搭建
（一）安装node.js
Win7支持的 NodeJs 最高版本为 13.14.0，下载地址：https://nodejs.org/zh-cn/download/releases/

NODEJS版本下载.png

（二）node.js相关配置
1.nodejs文件夹下新建 node_cache （缓存）和 node_global （全局文件夹）。
2.配置 nodejs环境变量
a.用户变量：修改PATH为 C:\Program Files\nodejs\node_global（可不设）
b.系统变量：新建NODE_PATH 为:G:\nodejs\node_global\node_modules
c.系统变量：修改Path，在原路径后面修改为:
‘;% NODE_PATH%\ node_modules;D:\nodejs;’
3.cmd执行命令：
npm config set cache " D:\nodejs\node_cache "
npm config set prefix " D:\nodejs\node_global "
4.更换淘宝镜像
npm config set registry=https://registry.npm.taobao.org
查看镜像
npm config get registry
（三）安装vue脚手架
1.vue2
npm install vue -g
npm install vue-cli –g
默认安装2.9.6版本
2.vue3
npm install vue -g
npm install -g @vue/cli
3.查看版本
查看vue版本
vue -V
（四）新建VUE项目
打开webstorm后，文件》新建 项目，然后出现下面的图片：

webstorm搭建vue.png

设置运行参数：

webstorm运行vue.png

运行成功：

webstorm运行vue成功.png

注意，在新建项目的时候容易出现下面这个错误：
“You are using Node v10.16.0, but this version of @vue/cli requires Node ^12.0.0 || ＞= 14.0.0”
解决方法：
1、执行卸载命令删除当前的脚手架版本：
已知安装版本：npm install -g @vue/cli@版本号
未知安装版本：npm uninstall -g @vue/cli
2.删除node v10版本，重新安装node v12版本，下载地址：https://nodejs.org/zh-cn/download/releases/
3.执行如下命令安装低版本的脚手架：npm install vue-cli -g，默认安装2.9.6版本
4.在cmd中执行：vue -V 命令；

vue命令查看版本.png

5.再次新建vue项目。
（五）vue-cli新建vue项目
1.新建文件夹myfirst，进入文件夹，输入 vue init webpack vue-cli-test，其中vue-cli-test为新项目文件名
2.跳入选择项来进行项目信息填写与确认
a.Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
b.Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
c.Author ()： ----作者
d.接下来会让用户选择：

        Runtime + Compiler: recommended for most users** **运行加编译，既然已经说了推荐，就选它了
        Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere仅运行时，已经有推荐了就选择第一个了
        Install vue-router? (Y/n)是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
        Use ESLint to lint your code? (Y/n)是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
        接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
        Setup unit tests with Karma + Mocha? (Y/n)是否安装单元测试，选择安装y回车
        Setup e2e tests with Nightwatch(Y/n)?是否安装e2e测试 ，选择安装y回车

cli安装vue.png

3. 配置完成之后，myfirst目录下面多了一个vue-cli-test的文件夹，会自动下载依赖包；

4. 输入 npm run dev 启动项目，成功后输入访问地址，显示如下界面:

   
   
   输入npm命令运行vue.png