其他分享
首页 > 其他分享> > 【新手教程】2022vue-cil安装教程(详细)

【新手教程】2022vue-cil安装教程(详细)

作者:互联网

2022保姆级教程从0到1安装npm、vue脚手架

1.安装node.js

前往官网 https://nodejs.org/en/download/

image-20220128163329325

在D盘中创建nodejs文件夹,将安装路径放在这。

image-20220128163439512

image-20220128163508468

在文件夹中创建node_cache 和 node_global

分别保存node的缓存和node的全局变量

image-20220128163606807

2.配置node和npm的环境

前往 系统变量 --> 高级 -->环境变量

image-20220128164307176

在系统变量中新建NODE_PATH,如下图

image-20220128164127691

在 系统变量 中的path里添加路径

image-20220128164553564

点击 环境变量 的path

image-20220128164654824

/***

红圈中的路径一定要改掉,不然后面的所有东西都会安装到c盘的默认文件夹去

***/

image-20220128164722318

3.在cmd中进行npm相关安装

win+r 输入cmd,打开终端

缓存设置:

npm config set cache "D:\nodejs\node_cache"

全局变量设置:

npm config set prefix "D:\nodejs\node_global"

在c盘用户里可以看到有“.npmrc”文件,用vscode打开可以验证npm的设置

image-20220128170102988

image-20220128170419337

然后输入:npm install express -g 来测试是否可以成功安装

“-g”是安装全局变量的意思

image-20220128170610576

如果看到“operation not permitted”说明权限不够,对D:\nodejs 文件夹的设置--> 安全-->编辑 里面完全控制勾上

image-20220128170749347

再试一遍,就能安装成功

image-20220128170933215

打开D:\nodejs\node_global\ 看到安装的express文件说明一切都顺利

image-20220128171214367

image-20220128171227304

如果使用npm下载过慢的话,可以安装淘宝的npm镜像——cnpm

输入:

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

image-20220128171653898

安装 webpack

输入:

cnpm install webpack -g

安装vue

输入:

cnpm install vue -g

安装vue-cil脚手架

输入

cnpm install vue-cli -g

输入“webpack -v”,会看到以下代码

We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

此时回车,输入:

cnpm install webpack-cli -g

就能成功安装

image-20220128172623878

image-20220128172642876

至此,依次输入以下代码检查是否安装完成

node -v
npm -v
webpack -v
vue -V
cnpm -v

image-20220128172504876

image-20220128172711229

image-20220128172718731

4.创建vue

在D盘创建vueproject文件夹,用来存放vue文件

在cmd中用cd切换到该文件夹,使用vue init的命令,创建项目

vue init webpack firstvue

其中firstvue可以改成想要的目录名

随后依次按照提示输入信息

image-20220128173145920

如果发现无法安装,可能是vueproject文件夹的权限不够,和之前一样设置“完全控制”的权限即可

image-20220128173317948

image-20220128173339646

按照提示即可

cd firstvue
npm run dev

image-20220128173422582

输入网址,安装成功!!

image-20220128173439114

随后就可以在webstorm等软件中打开项目了

image-20220128173519533

image-20220128173539844

要运行的话,点击右上角edit configurations,选择npm,如图设置

image-20220128173724783

image-20220128173757831

成功!

5.参考文献

https://blog.csdn.net/thumbs_up_sign_ygj/article/details/104979272

https://www.cnblogs.com/guanxiying/p/13160323.html

我按照大佬的文章配环境发现还是遇到了很多问题,琢磨了好几个小时终于成功,故写下这篇教程,希望能帮到更多的人

标签:npm,node,教程,vue,cil,webpack,install,安装,2022vue
来源: https://www.cnblogs.com/bcyyds/p/15854101.html