1.在这之前我一直有个疑问,为什么搭建vue项目要基于nodejs环境,于是我查找了许多大神的解释,找到几种解答:
Java角度:
https://blog.csdn.net/myKurt/article/details/79914078了解更多详情
前端角度:
https://blog.csdn.net/wenshu12321/article/details/62071611
2.接下来就是主题,怎样搭建vue项目,node官网下载对应msi镜像文件,安装,尽量自定义安装路径,现在一般安装好都不用配置环境变量,必要时配置环境变量即path增加安装路径。测试安装是否成功,win+r 输入cmd 执行 node -v 查询node版本号 执行npm -v 查询npm版本号,如果出现表示成功。
请注意,如果你出现下面的问题:
E:\demo>cnpm install -cli -g
C:\Users\msi\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\node_modules\tar\lib\parse.js:34
const gzipHeader = Buffer.from([0x1f, 0x8b])
^
TypeError: this is not a typed array.
at Function.from (native)
at Object.<anonymous> (C:\Users\msi\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\node_modules\tar\lib\parse.js:34:27)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (C:\Users\msi\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\node_modules\tar\lib\list.js:10:16)
at Module._compile (module.js:409:26)
这是因为node版本号太低的原因,卸载重新安装最新版即可。
3.npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像 执行 cnpm -v 查询是否安装成功
4.cnpm install vue-cli -g 安装vue-cli脚手架构建工具,输入 vue -V(注意这里是大写的“V”)检查是否安装成功
5.cnpm install webpack-cli -g 安装webpack,输入webpack -v 检查是否安装成功
6.确保以上所有工具都安装成功,接下来开始搭建vue项目。
7.进入E盘,不是C盘就行,执行vue init webpack myvuetest ,myvuetest就是新建的文件夹名字。
C:\Users\msi>E:
E:\>vue init webpack myvuetest
? Project name myvuetest
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "myvuetest".
# Installing project dependencies ...
# ========================
8.接下来是一系列的选择,如果不做选择直接回车确定,具体都是什么意思,我是参考的这位大佬
9.cd myvuetest 即在你创建的文件根目录下,执行npm run dev,出来后直接复制链接在浏览器打开
10.打开浏览器,链接放进去
到这里就圆满成功了,困扰了我一下午,有些问题别人没有我却有,难受呀,如果还有同样的疑惑,欢迎大家一起解决问题,也希望大神能够指出我不对的地方,我一定改正! qwq.....