创建一个vue项目框架

一、使用步骤

1.引入库

先安装node.js

Node.js

2.检查node.js版本

E:\daima\vue\vue项目>npm -v
8.15.0

3.读入数据

全局安装脚手架

E:\daima\vue\vue项目>npm install --global vue-cli
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

added 230 packages, and audited 231 packages in 1m

11 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (2 moderate, 2 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

4.创建项目

E:\daima\vue\vue项目>vue init webpack lixks

5.进入项目

E:\daima\vue\vue项目>cd lixks

6.运行项目

npm run dev

7.运行错误

PS E:\daima\vue\vue项目\links> npm run dev

> [email protected] dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

解决方法:

一般都是webpack版本错误

原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好
webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低
(1)、npm uninstall webpack-dev-server
(2)、npm install [email protected]
(3)、npm run dev

如果上面方法不行,查看以下原因


===================
如何执行npm uninstall webpack-dev-server 也报错的话只能用下面方法了
原因是你的node_modules有意外改动,导致依赖库不完整。
解决:
1.删除项目下的node_modules
2.在项目目录下重新执行npm install 或者cnpm install,会重新生成node_modules
3.执行npm run build 或者cnpm run build
4.执行npm run dev 或者cnpm run dev
==================

PS E:\webcode\bigbullmobile> cnpm run dev

> [email protected] dev E:\webcode\bigbullmobile
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

internal/modules/cjs/loader.js:573
throw err;
^

Error: Cannot find module 'array-includes'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
at Function.Module._load (internal/modules/cjs/loader.js:497:25)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (E:\webcode\bigbullmobile\node_modules\[email protected]@webpack-dev-server\lib\polyfills.js:6:18)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\zheng\AppData\Roaming\npm-cache\_logs\2019-01-26T18_31_50_813Z-debug.log
PS E:\webcode\bigbullmobile>
这是解决方法的网址链接
vue项目初始化时npm run dev报错webpack-dev-server解决方法原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好 webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低 (1)、npm uninstall webpack-dev-server ÿ…https://www.ngui.cc/el/918545.html?action=onClick

8.运行结果

 I  Your application is running here: http://localhost:8080

出现页面访问网址

总结

提示:vue新版本与旧版本的一些插件冲突

猜你喜欢

转载自blog.csdn.net/weixin_64948861/article/details/129198353