一、搭建新的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,这个问题后续再研究吧。
https://www.npmjs.cn/misc/config/

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版本
Logo

前往低代码交流专区

更多推荐