Windows搭建vue环境

浅浅的花香味﹌ 2022-03-19 15:48 369阅读 0赞

# 前言 #

vue.js是一套构建用户界面的渐进式框架，其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

# vue.js安装 #

1.从官网上下载后直接通过`<script></script>`标签引入。

官网地址：[vue官网][vue]，我引用的是开发版本，与生产版本相比，开发版本包含完整的警告和调试模式。

2.直接链接到CDN，也可以进行访问。

# node.js安装 #

给大家一个网址：

> 链接：https://pan.baidu.com/s/1Dy8LGj05E\_CDdUf\_9IZcaA  
> 提取码：yq1a  
> 复制这段内容后打开百度网盘手机App，操作更方便哦

里面是小编上传的node.js文件，大家可以下载进行安装，安装的过程中一路next即可，中间可以更改安装路径，更改之后记一下自己的安装路径。我的安装路径是`D:\nodejs`。

提示安装完成之后，打开cmd命令窗口，输入`node -v`和`npm -v`，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]  
  这里有一个cnpm（npm的国内淘宝镜像），如果npm安装失败的话，可以安装cnpm，在命令行中输入`npm install -g cnpm –registry=http://registry.npm.taobao.org`，等待安装完成。

# 环境配置 #

1.配置npm安装的全局模块所在的路径以及cache的路径为node.js的安装路径，在安装node.js的文件夹下创建两个文件夹，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]  
  2.打开cmd命令窗口，输入（注意修改路径为自己的路径）：

>  npm config set prefix “D:\\nodejs\\node\_global”  
> npm config set cache “D:\\nodejs\\node\_cache”

3.设置环境变量，右击此电脑→属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20190217211143872.png]  
  把Path的路径修改为自己创建的路径：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]  
  4.在cmd命令窗口中输入如下命令进行模块的全局安装（ -g是全局安装的意思）：

npm install express -g

# 安装vue-cli脚手架 #

脚手架2的安装方式：在命令行中输入`npm install -g vue-cli`，等待安装完成。

脚手架4的安装方式：在命令行中输入`npm install -g @vue/cli`，等待安装完成【2020年8月30日更新】。

# 创建项目 #

脚手架4创建项目的方式：在cmd命令中运行命令`vue create firstVue`（更多关于脚手架4创建项目的内容请点击：[vue-cli4新建项目及分环境打包][vue-cli4]），以下是脚手架2创建项目的方式【2020年8月30日更新】。

在cmd命令中运行命令`vue init webpack firstVue`：  
![在这里插入图片描述][201902172124514.png]  
  之后会出现一些对于文件的描述，默认回车即可，然后等待文件的创建，如果创建完成，去安装目录下可以找到刚刚创建的文件。

文件目录如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]

安装完成之后就可以运行项目了，在cmd命令中，在项目目录下，输入`npm run dev`，就会运行了。  
![在这里插入图片描述][20190217212944727.png]  
  浏览器中输入如下网址，出现如下界面即安装完成。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 5]  
  注：项目的创建和运行也可以在vscode中运行。

[vue]: https://cn.vuejs.org/v2/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220319/e3756a16ccc74713b2530ffa182ce8c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20220319/5d309c00edb64e48b015c81c9466a766.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]: /images/20220319/20c9064f078645488a9341bedf0ed8fa.png
[20190217211143872.png]: /images/20220319/c4275867e6f6415082138220d3188b8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]: /images/20220319/89f951eb6610475ba6f5dc74ceb3cd88.png
[vue-cli4]: https://blog.csdn.net/m0_37508531/article/details/103665789
[201902172124514.png]: /images/20220319/5807e11afce24e45a2b2d0c8a681b1c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]: /images/20220319/1520eeff46f147a690c7a2629c11c29b.png
[20190217212944727.png]: /images/20220319/0382bf5450474a958e5732fa64f73904.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 5]: /images/20220319/a387860bdd6746559b060e2c16660929.png