Vue项目搭建及报错解决

一、搭建新的Vue项目

第一步，安装node.js
第二步：

cnpm install -g vue-cli //全局安装vue-cli脚手架,用于搭建项目模板框架

第三步：

vue init webpack vue_test //创建项目，vue_test是项目名称

第四步：

cd vue_test（项目名）//进入项目文件夹

第五步：

npm install //安装package.json中对应的依赖包（dependencies和devDependencies 下的都安装）

第六步：

npm run dev

第七步：
在浏览器打开网页 http://localhost:8080(默认端口为8080，当被占用时会往后递推)

二、报错解决

1.运行npm install 时报错“‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。”

网上查的几种解决方法：
1.删除node_modules和package-lock.json文件，重新运行npm install，无效。
2.删除node_modules和package-lock.json文件，使用cnpm install，无效。
3.单独运行npm install webpack-dev-server，可以安装上这个依赖包，但是运行npm run dev会提示其他依赖没有安装，需要全部手动安装。
4.更新node版本，无效。
5.运行npm install后执行npm update，可以下载全部依赖包，成功运行本项目，但是其他新建项目还是会出现这个问题。
6.命令行执行 $ npm config ls -l，查看node的默认配置，发现有个production 属性值为null，使用$ npm config set production false将production属性设置为false，可以从源头解决这个问题，其他新建项目执行npm install也可以安装全部依赖包了。

分析：
当使用方法5可以解决这个问题时，原本打算不在这浪费时间了，突然想到每次执行npm install都只安装了两个依赖包，然后就看了一下，发现这两个包都是package.json文件中dependencies下的，而devDependencies 下面的包都没有安装，而且鼠标放上去都有Module ‘webpack-dev-server’ is not installed npm这个提示，可惜百度没搜到任何有用信息，于是转为搜索“npm install 漏包devDependencies都没安装”，看到了这篇博文https://blog.csdn.net/weixin_34235457/article/details/91888700
博主提到 npm 有个默认配置项 production （生产）设置为 true 时（他是因为在 windows 的环境变量里添加了 NODE_ENV = production 这条属性）就不会安装 devDependencies 下的依赖包，将production属性设置为false就可以，我也查了下npm官方文档(https://www.npmjs.cn/misc/config/)，production属性默认值为false，不知道我的为啥会是null，这个问题后续再研究吧。

2.开发环境运行npm run dev 报错：Module build failed: Error: “extract-text-webpack-plugin” loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

在build\webpack.dev.conf.js中添加以下代码

plugins:[

	...
	
	new ExtractTextPlugin({
	      filename: utils.assetsPath('css/[name].[contenthash].css'),
	      allChunks: false,
	    })
]

三、node版本升级和降级

1.node升级（windows）

1、命令行查看当前node版本和node安装位置

node -v //查看当前node版本
where node //查看node安装位置

备注：where node感觉不太准，我用这个查出来的地址在users目录下，但实际上我的node安装在C:\Program Files\nodejs目录下，新版本node也是安装在这里。

2、https://nodejs.org/zh-cn/download/releases/ 下载更高版本的nodejs（.msi文件），安装到之前的目录，覆盖旧版本。

2.node降级

1.下载gnvm
参考链接：https://blog.csdn.net/weixin_45543192/article/details/103767554

2.将下载的 gnvm.exe 保存到 node.js 所在的文件夹下，然后命令行执行以下命令。

gnvm version //查看gnvm版本，检查gnvm是否安装成功
gnvm search 16.*.* //查询要下载的 node 版本
gnvm install 16.6.1 --global //下载node 
gnvm ls //查看已下载的node版本列表
gnvm use 8.11.3 //使用指定版本node
node -v //查看当前node版本