超级详细的Vue安装与配置教程

た入场券 2024-04-01 11:09 92阅读 0赞

Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下

−

*  [一、下载和安装Vue][Vue]
 *  [二、创建全局安装目录和缓存日志目录][Link 1]
 *  [三、配置环境变量][Link 2]
    
     *  [ 1. 环境变量---用户变量---选中Path---点编辑][1. _---_---_Path---]
     *  [2. 环境变量---系统变量---新建][2. _---_---]
 *  [ 三、安装vue][_vue]
    
     *  [1. 安装vue.js][1. _vue.js]
     *  [2. 安装webpack模板][2. _webpack]
     *  [3. 安装脚手架vue-cli][3. _vue-cli]
     *  [4. 安装vue-router][4. _vue-router]
 *  [四、我的第一个的 vue-cli应用程序][vue-cli]
 *  [总结][Link 3]

### 一、下载和安装Vue ###

官网下载地址[Download | Node.js][Download _ Node.js]

![b959142a9e0df674c52167a9a7d7a775.jpeg][]

选择适合自己的版本，推荐LTS，长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

下载好后，双击下载的安装包。

![aede9f39ca21b976fb11a4b1616145d3.png][]

点next

![0281f4c13cb1e51767c6f2c7f5cf1418.png][]

勾选I accept............，点next

![8ebc565c0abd70c51ef6bb511f2af712.png][]

这里建议更改为自己想要的的安装目录，然后点next（可以自己先建好安装目录，我这里是提前建好的一个目录：E:\\Java\\nodejs）

![562b034544c6edd83aa964875300b670.png][]

这里有五个选项，有时间可以看一下，就是安装的时候会安装一些组件和npm，同时会添加环境变量，右侧有说明。我们直接点next

![709c7e5de0cf8e5fae38c8595cfe9d59.png][]

这里不用勾选，直接点next

![ab45f0961bddf1f766e8028a3ba7349a.png][]

install

![d796753a22edc3c3666dc269d2c5f222.png][]

finish

安装完成后，检查一下是否安装成功。

打开cmd，输入如下指令。

![007610f76d840ec3a276e7bc33c7e2ba.png][]

输出了版本号就说明安装成功了。

安装后的完整目录：

![2e1ab80244f200d5df8bc9f623e7793b.png][]

### 二、创建全局安装目录和缓存日志目录 ###

在我们的安装目录下，创建名为node\_cache和node\_global的两个文件夹。

![0aaea35eba45ac1f883092169df6ac39.png][]

打开Dos窗口，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix "你的安装目录\\node\_global"

npm config set cache "你的安装目录\\node\_cache"

![72a301cc0096c948d505940434f6f57e.png][]

为了以后下载包快速，修改源为淘宝镜像。（这里修改了，我们就不需要安装cnpm了，因为cnpm就是**Node.js淘宝镜像加速器，**这里配置了就不需要安装了）

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm config set registry https:</code><code>//registry.npm.taobao.org</code></p> </td> 
  </tr> 
 </tbody> 
</table>

查看npm配置修改是否成功

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm config list</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![ce8bb1498a60eaf40800e3be275b5737.png][]

同时我们会发现多了个文件：C:\\Users\\用户名\\下的.npmrc文件，可以理解为一个记录当前用户修改信息的配置文件。如果你把这个文件删了，那你刚刚修改的那些参数全没有了，回归默认配置。

![a427e729018d65f071eba2cfafd39812.png][]

### 三、配置环境变量 ###

在安装过程中，自动配置了两个环境变量一个是**环境变量---用户变量---Path**里面的**C:\\Users\\你的用户名\\AppData\\Roaming\\npm**另一个是**环境变量---系统变量---Path**里面的**软件安装目录**，我们需要增加和修改一下。

#### 1. 环境变量---用户变量---选中Path---点编辑 ####

![984126341a065bf70345d538ef1f6c3a.png][]

将 **C:\\Users\\你的用户名\\AppData\\Roaming\\npm** 修改为 **你的安装目录\\node\_global**

![81fc9cf74090d2592f547de811cb4497.png][]

![ebacc6050a6f305e63d891fe57f7bc7a.png][]

#### 2. 环境变量---系统变量---新建 ####

变量名：NODE\_PATH

变量值：你的安装目录\\node\_global\\node\_modules

![cb05ffe7725810b4673725f6cf3cd8a4.png][]

注：这里的node\_modules目录是还没有的，但是我们等会把模块安装到全局目录下就会自动生成这个文件夹。

![768b2c85748cd4214b95084025f99012.png][]

记得在系统变量---Path添加上%NODE\_PATH%

![e22ba98358fd51f281dadc57830ac5c6.jpeg][]

### 三、安装vue ###

#### 1. 安装vue.js ####

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm install vue -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node\_modules文件夹下，没有目录则自动创建。

如果出现了这个问题，是因为当前用户没有这个权限。

![56b177768d9a58c6e13c6676e3559cb7.png][]

网上有些方法是删除C:\\Users\\用户名\\下的.npmrc文件，万万不可这样，因为那个文件删除了，我们前面修改的全局模块目录和缓存目录配置就没了！！！到时候vue包就下载到C:\\Users\\你的用户名\\AppData\\Roaming\\npm去了，也就是默认的地方去了，那我们前面修改就没意义了。

正确的打开方式是，用管理员身份运行呗！

Win + s 搜索 “命令提示符”，右键以管理员身份运行。

![e18cf401a9b7fad523f7d81e88783c8c.jpeg][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm install vue -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![bbbf938601bd3b9b5a7ac300649a3d4d.png][]

#### 2. 安装webpack模板 ####

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm install webpack -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![9be87a9fc3d20ed7aabbd52176d4e778.png][]

此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm install webpack-cli -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![c641fec6c6d4527b77dcadafffd79856.png][]

输入 webpack -v，能输出版本号就说明都安装好了。

#### 3. 安装脚手架vue-cli ####

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm install vue-cli -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![10b52c552272659727f82a2ac7b29c16.png][]

输入vue --version，能输出版本号就说明安装好了。

#### 4. 安装vue-router ####

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm install vue-router -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![1b59d9a638f2d66f0aa2b58c1c9462a3.png][]

都弄好了我们打开我们自定义的全局模块目录下的node\_modules文件夹，会发现安装的模块都统一在这里。

![9c34d828b83712f5a02f9dfcb614b9ee.png][]

### 四、我的第一个的 vue-cli应用程序 ###

1. 创建项目（最好在cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在C:\\Users\\用户名\\，也可以直接在想要的项目路径下输入cmd）可能会出现权限问题，所以我们还是以管理员运行cmd窗口。

![e0d67ed4bd9770c2eaaa581afdc2041c.png][]

2. 创建一个基于webpack模板的vue应用程序

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>vue init webpack 项目名</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![1a5c85677a265bcb20296f1996448d5f.png][]

根据自己的需求来操作。

*  项目名是？回车
 *  项目描述？回车
 *  作者？回车
 *  是否安装编译器 回车
 *  是否安装vue-router y 回车
 *  是否使用ESLint做代码检查 n 回车
 *  是否安装单元测试工具 n 回车
 *  单元测试相关 n 回车
 *  创建完成后直接初始化 n 回车

![f955b39be4f011b46fd37329b2b87e36.png][]

因为没有自动初始化，我们按照代码提示手动初始化

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>cd</code> <code>myvue</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![dcbdf81b33a7d125b7f7c64d83723d38.png][]

访问网址：成功！

![6ef220dcb05dd81aef1626a8f9a3adeb.png][]

###  ###

[Vue]: https://www.jb51.net/article/251371.htm#_label0
[Link 1]: https://www.jb51.net/article/251371.htm#_label1
[Link 2]: https://www.jb51.net/article/251371.htm#_label2
[1. _---_---_Path---]: https://www.jb51.net/article/251371.htm#_lab2_2_0
[2. _---_---]: https://www.jb51.net/article/251371.htm#_lab2_2_1
[_vue]: https://www.jb51.net/article/251371.htm#_label3
[1. _vue.js]: https://www.jb51.net/article/251371.htm#_lab2_3_2
[2. _webpack]: https://www.jb51.net/article/251371.htm#_lab2_3_3
[3. _vue-cli]: https://www.jb51.net/article/251371.htm#_lab2_3_4
[4. _vue-router]: https://www.jb51.net/article/251371.htm#_lab2_3_5
[vue-cli]: https://www.jb51.net/article/251371.htm#_label4
[Link 3]: https://www.jb51.net/article/251371.htm#_label5
[Download _ Node.js]: https://nodejs.org/en/download/
[b959142a9e0df674c52167a9a7d7a775.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/409c8b2f523c4ff69d523c32559917db.jpeg
[aede9f39ca21b976fb11a4b1616145d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/062027fc10c34b9ab7b8fac67e3deefb.png
[0281f4c13cb1e51767c6f2c7f5cf1418.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/271bd9518e184f9fa60774f41d1ef3e2.png
[8ebc565c0abd70c51ef6bb511f2af712.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/892c855a863f4737b992b2ecc31aaa8c.png
[562b034544c6edd83aa964875300b670.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a91d32bbed6442519f35c7e183392fc4.png
[709c7e5de0cf8e5fae38c8595cfe9d59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0ec59654278a49baa03502e96e565f28.png
[ab45f0961bddf1f766e8028a3ba7349a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/51f4cd4d43f94124a3dae9fd8a270cbb.png
[d796753a22edc3c3666dc269d2c5f222.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/37cba7f63810405bb2aaeee2349fb7dd.png
[007610f76d840ec3a276e7bc33c7e2ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9cd7041c492a4581a5265c0cdd5254f3.png
[2e1ab80244f200d5df8bc9f623e7793b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b25273906d74453eb46598cddd94ade4.png
[0aaea35eba45ac1f883092169df6ac39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4088da80f89143c8a6bdc9b62aabaf91.png
[72a301cc0096c948d505940434f6f57e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0e5d3b90572a4f9db48a45e2b137abcb.png
[ce8bb1498a60eaf40800e3be275b5737.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fb2694ceae37489ab7002a46e96efb64.png
[a427e729018d65f071eba2cfafd39812.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/827f5ba4d57f490ebe27306e3f3d8be5.png
[984126341a065bf70345d538ef1f6c3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/dd83b03914074815871f433ece328e5f.png
[81fc9cf74090d2592f547de811cb4497.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bb458c6f14ba4dd799b8f8947d3bd2f9.png
[ebacc6050a6f305e63d891fe57f7bc7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/343e21f7946646319bc7d95b3f6cbdac.png
[cb05ffe7725810b4673725f6cf3cd8a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e678c02cbd50417ca2e602e275206ed2.png
[768b2c85748cd4214b95084025f99012.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/067bec98d27f4f7d8e3707e7a0f31755.png
[e22ba98358fd51f281dadc57830ac5c6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4b24e412b31f41469981bf5cb887906c.jpeg
[56b177768d9a58c6e13c6676e3559cb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bda69e87f5584d10b408d1ae3f9fa578.png
[e18cf401a9b7fad523f7d81e88783c8c.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/557625a6f740472fa7c69be8927f6d87.jpeg
[bbbf938601bd3b9b5a7ac300649a3d4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f1492a708d0843d5a7e685d9836a8b85.png
[9be87a9fc3d20ed7aabbd52176d4e778.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f5d4b0bf86c6424685cb108f7afd71e7.png
[c641fec6c6d4527b77dcadafffd79856.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/79bc1cc0cbbf4f6996226d8f11f3c363.png
[10b52c552272659727f82a2ac7b29c16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/20fe0b32e20a4b35a3b586935a695624.png
[1b59d9a638f2d66f0aa2b58c1c9462a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e730463f1f2f497aabd95f3e876a57df.png
[9c34d828b83712f5a02f9dfcb614b9ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d5cb8e2dc094453db5f0450f992454d1.png
[e0d67ed4bd9770c2eaaa581afdc2041c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2f0e7a96b3954ef69082b28dbc2ec17a.png
[1a5c85677a265bcb20296f1996448d5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b913c2f997104a12b0766b700627f1c3.png
[f955b39be4f011b46fd37329b2b87e36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/07d2020bc3504d66ba331d64ce35de4e.png
[dcbdf81b33a7d125b7f7c64d83723d38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/64b4b3ec6f1346518bc19b79be64431b.png
[6ef220dcb05dd81aef1626a8f9a3adeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7fb8c02105d446fe8809f6f628e5baec.png