搭建Vue 环境

搭建Vue 环境 2021年5月8日

本文章引用了https://blog.csdn.net/shenwb110/article/details/86137581/

(1) 如果安装过 其他的则先卸载

npm uninstall vue-cli -g

一：官网下载Node.js
https://nodejs.org/en/download/
历史版本下载地址
https://nodejs.org/dist/v13.0.1/
如果是压缩包的话，记得配置下环境变量到解压的目录

注意：v14.1.0 版本以上 只能在win8.1及 以上版本支持 13版本使用不了，错误忘了保存，应该是不维护之类的。

如果下载压缩包配置环境变量的话使用 npm -v报错

安装完成后看 Node.js 版本

node -v 

npm 版本

npm -v

二：配置npm的全局模块的存放路径以及缓存的路径
默认会将模块安装到C:\Users\用户名\AppData\Roaming\npm路径中。所以可以修改路径
在node.js的安装目录下新建两个文件夹node-cache和node_global

npm config set prefix "D:\node\node12.9.1\node_global"
npm config set cache "D:\node\node12.9.1\node_cache"

三、安装cnpm
有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要npm的国内镜像—cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org

四、安装vue-cli脚手架

npm install -g @vue-cli 或者 cnpm install -g @vue/cli

查看版本

vue -V

五、安装webpack

cnpm install -g webpack

六、用vue-cli构建项目
方式一：命令行创建
首先选定目录，并切换到选定目录

vue init webpack vue001

方式二：Vue项目管理器图形化界面创建
首先选定目录，并切换到选定目录，执行 vue ui ，打开Vue项目管理器图形化界面

• 注意：如果找不到cnpm 命令或者vue 命令 记得查看node目录下node_global 文件夹有没有cnpm 和vue 如果有在环境变量里面配置即可

附：Vue3.0 配置地址
https://www.cnblogs.com/coober/p/10875647.html
附:VUe 3.0 报错解决方案

解决办法： npm install -D sass-loader node-sass 一定要多等，多等多等！

然后运行
出错： Error: Cannot find module ‘vue-loader-v16/package.json

解决方法：npm install --no-optional --verbose

下载依赖： npm install element-ui -S

错误：引入element-ui 的时候出错
‘ElementUI’ is defined but never used no-unused-vars

错误： ‘Vue’ is not defined no-undef
看写法用.use
下载依赖：npm i normalize.css -S
npm install css-loader style-loader -S