Vue环境搭建(node安装,环境配置,运行项目)

Vue环境搭建(node安装,环境配置,运行项目)

一、安装node

1、去官网下载node之后，推荐安装稳定版本（LTS）node官网下载地址

2、查看node安装成功否

node -v 查看node版本
npm -v 查看npm版本
where node 查看node安装位置

注意:node 版本号大于npm版本号，基于之前安装版本过低，后面会报错。

3、在node安装目录下新建node_global和node_cache文件夹，分别存放package包和缓存。

更新npm配置路径为新建目录路径，如：D:\nodejs
npm config set prefix “D:\nodejs\node_global”

npm config set cache “D:\nodejs\node_cache”

npm config set registry https://registry.npm.taobao.org（npm 运行慢，配置国内淘宝镜像包）后续包安装命令 npm 即可改为 cnpm

4、配置node的环境变量
我的电脑(属性)->高级系统设置->环境变量编辑-保存

编辑path环境变量，新增node安装路径

增加环境变量NODE_PATH 配置的内容为node_modules 路径

**以上已配置好node环境------------------------------------------------------------------

二、下面开始安装vue相关依赖**

1、安装vue
npm install vue -g

npm install vue-router -g

-g是指安装到node_global全局目录

2、安装vue-cli脚手架
npm install vue-cli -g

三、运行项目

1、从命令符进入项目所在目录，执行cnpm或npm install 安装相关包

2、然后执行cnpm run server 或 npm run 打包启动项目

运行完成后访问以下地址即可在浏览器成功访问该vue项目

可能出现的问题：

在执行cnpm install安装过程中可能出现安装失败的情况，例如：各个包可能存在停止使用的情况或版本对应错误问题

当出现依赖停止使用或版本不合适的情况时，首先在node_modules目录中找到该包，然后删除，再重新选择版本进行安装。
例如：

修改package.json中的存在问题版本号

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^6.0.1",/node-sass版本/
    "sass-loader": "^10.0.1",/sass版本对应/
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
    "vue-template-compiler": "^2.6.10"
  },

最后再次执行cnpm或npm install 安装，即可安装成功。