![cover](https://img-blog.csdnimg.cn/3f3bc0ee15324b19b957d118df6f4b6d.png)
Vue环境搭建(node安装,环境配置,运行项目)
node、vue
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 安装,即可安装成功。
更多推荐
所有评论(0)