nodejs+vue4.X的安装

叁歲伎倆 2022-12-01 12:22 212阅读 0赞

第一步：安装node.js到e:\\nodejs目录

node -v 查看nodejs的版本

npm -v 查看npm的版本

第二步：在nodejs目录中，再新建node\_global和node\_cache这两个目录

第三步：设置e:\\nodejs\\node\_global 为全局目录

npm config set prefix "e:\\nodejs\\node\_global"

设置e:\\nodejs\\node\_cache 为缓存目录

npm config set cache "e:\\nodejs\\node\_cache"

安装过程中出错，可以用**清除npm缓存命令 : npm cache clean -f**

第四步：因为国外的npm下载包比较慢，所以要使用国内淘宝镜像

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

第五步：安装express（选择安装）。cnpm**```install` `-g express`**

**`第六步：`**安装webpack 。cnpm**```install` `-g webpack`**

**`第七步：安装vue`**

**2.X的vue的安装是：cnpm install vue -g** **和cnpm install vue-cli -g**

**验证：vue -V**

**3.x和4.x的vue的安装是cnpm** install -g @vue/cli

第八步：建项目。

（1）对于2.x的命令是： vue init webpack 项目名；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70][]

最后cd键入项目所在文件夹，npm install安装依赖 npm run dev(启动)走你。http://localhost:8080/\#/访问入口。

（2）对于3.x/4.x的命令是：

vue create 项目名称

![20200827082137708.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 1][]

这里只需要选中Bable，Router,Vuex,Css预编译即可  
space键为选中选项，enter键为确认选中。

![2020082708240355.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 2][]

选择存放位置  
1）单独存放 2）存放在pack.json  
选择单独存放

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 3][]

是否保存本次为下次的模版 n

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 4][]

根据指引  
1）cd 项目名称  
2）执行`npm run serve`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70]: /images/20221123/3f3ebf6d3bbd4f7c85877bbe7a51cb0b.png
[20200827082137708.png]: /images/20221123/4cb9837f74354529bfa11119bbe29ab9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 1]: /images/20221123/0e7572d461184938aada71572b7d017d.png
[2020082708240355.png]: /images/20221123/022258de77df4ec28bc4a1e5ab612c94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 2]: /images/20221123/0cf51f498328447682db284b6763b148.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 3]: /images/20221123/8850347ae1164ce0b6385ba01ddeae34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 4]: /images/20221123/a3cd1f73115845f1a2db3d4c3aaf8a40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 5]: /images/20221123/84e4cb157fc0479c86dd5889b30fd9f3.png