Vue学习：创建Vue

àì夳堔傛蜴生んèń 2023-10-14 18:53 37阅读 0赞

### 一、安装Node.js和NPM ###

#### **1.安装node.js** ####

从node.js官网下载并安装node.js 网址： [Download | Node.js][Download _ Node.js]

![798f1dfa285a46b7854855e28b5064e1.png][]

#### 2.双击” node-v8.1.2-x64.msi”开始安装 ####

![4cbaa798e7e64c7ca04c07ad93fa5e0c.png][]

![23a00e16bd584021b5aba30948d31be6.png][]

![a3c6e29c0b4245d8a555bc0fdf13bbd4.png][]

![7dc0332de6704b3c980d9a9e4f155216.png][]

![9ee5cc932b0440589a4040c94bb3dd5f.png][]

![d9e992820d364c62bbd145302332de25.png][]

![b1ce8993a14b44a38f16ca50d0a6ffb4.png][]

至此Node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置  
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口。

![b797143189f7438f95898c0839dd6f3b.png][]

![fbd075951f8f459b9edb8e96257c9d49.png][]

安装完后的目录如下图所示：

![47d3ad15849944488b69f9f3db798899.png][]

**注意:** **npm 版本需要大于 3.0，如果低于此版本需要升级它**

<table style="margin-left:81pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p>##升级npm</p> <p>cnpm install npm -g</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 3.安装NPM ####

.基于node.js利用淘宝npm镜像安装相关依赖,由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像

<table style="margin-left:81pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p><span style="color:#333333;">npm install -g cnpm --registry=</span>&nbsp;https://registry.npmmirror.com/</p> </td> 
  </tr> 
 </tbody> 
</table>

完成之后,我们可以用cnpm代替npm来安装依赖包了.

> 镜像源链接切换
> 
> 1.  全局切换镜像源：npm config set registry https://registry.npm.taobao.org
> 2.  查看镜像源使用状态：npm get registry
> 3.  全局切换官方镜像源：npm config set registry http://www.npmjs.org

> **使用 nrm 切换镜像源**
> 
> 1.  下载 nrm：npm install -g nrm
> 2.  查看可切换的镜像源： nrm ls (\*表示正在使用的镜像源)
> 
> \* npm ---------- https://registry.npmjs.org/
> 
> yarn --------- https://registry.yarnpkg.com/
> 
> tencent ------ https://mirrors.cloud.tencent.com/npm/
> 
> cnpm --------- https://r.cnpmjs.org/
> 
> taobao ------- https://registry.npmmirror.com/
> 
> npmMirror ---- [https://skimdb.npmjs.com/registry/][https_skimdb.npmjs.com_registry]
> 
> 切换淘宝镜像源：nrm use taobao

**注意：**在Linux系统环境里面如果下载nrm后执行nrm ls命令出现未找到命令，需要配置**全局的软链接**：  
sudo ln -s /home/nodejs/bin/nrm /usr/local/bin/  
其中 /home/nodejs/bin/nrm 是指你本地安装nodejs包的路径。/usr/local/bin/路径是你的程序命令执行路径，相当与Windows系统下的环境变量 PATH 路径，配置后可以在系统的任意位置执行你的命令。

### 二、安装VueCLI**脚手架构工具** ###

安装全局vue-cli脚手架构,用于帮助搭建所需要的模板框架

<table style="margin-left:81pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:345.1pt;"> <p>cnpm &nbsp;install –g @vue/cli</p> </td> 
  </tr> 
 </tbody> 
</table>

验证是否安装成功: 使用vue,出现如下信息,说明安装成功:

![5088102a54a54bdf92642bc56a212d74.png][]

进入到项目目录,

启动项目:

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:.0001pt;text-align:justify;">npm&nbsp;run serve</p> </td> 
  </tr> 
 </tbody> 
</table>

![02c83ba38dad44b0b5fa7acc71aa8ddc.png][]

**安装依赖 注意需要安装git git的安装自行百度**

<table style="margin-left:81pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p>cd first-project</p> <p>cnpm install</p> </td> 
  </tr> 
 </tbody> 
</table>

![08cb293aa7c54f10912386c28095b171.png][]

回到项目文件夹，会发现项目结构里，多了一个node\_modules文件夹（该文件里的内容就是之前安装的依赖）

![2c6b60ca6f1b432daebde11411acb794.png][]

**测试环境是否搭建成功**

<table style="margin-left:49.25pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:376.85pt;"> <p style="margin-left:.0001pt;text-align:justify;">&nbsp;npm &nbsp;run &nbsp;serve</p> </td> 
  </tr> 
 </tbody> 
</table>

![f54f7c8ad6db46eaa717af2f80d510cb.png][]

在浏览器输入URL “localhost:8080”

![3f94d5222b1748ba9364e1b2aab69ac4.png][]

### 三、在谷歌浏览器安装检查和调试Vue.js应用工具——VueDevtools ###

![2a3ca6d7cad24cdbbb1c79d2a7fdc6b9.png][]

![2c377a47da734a86821c753f5c04c576.png][]

![fcc30002a4ad4dd28d9e153450c8e939.png][]

### 四、创建Vue ###

#### 1.可视化工具界面方式 ####

![b4dc9509f4754e10883a74dd1154bf8c.png][]

![937210b3a8d34646895090a4daa33e8b.png][] ![1ceb1d8d93ac4d04bee53c3dfc777b8a.png][]![5a3414f4adf847ee8c67ef1d8aa68669.png][]

我之前没试过这个方法，就报错了

![c08f8834bfa54812b3bfa9dd59ada17a.png][]

[vue创建新项目报错“Cannot read properties of undefined (reading ‘indexOf‘)“\_aiyouweihei\_001的博客-CSDN博客][vue_Cannot read properties of undefined _reading _indexOf_aiyouweihei_001_-CSDN]

![5c6846dc140f4ef4bce7bbaa3517b4ce.png][]

这样就创建成功了，但是不推荐这个方法，复杂而且很慢，要在管理员运行模式下才可以打开。

#### 2.命令行方式 ####

在终端输入命令行![d72c5dea99da41638104684122e9ab15.png][]

选择vue3创建即可。

（这种方式比较便捷）

[Download _ Node.js]: https://nodejs.org/en/download/
[798f1dfa285a46b7854855e28b5064e1.png]: https://img-blog.csdnimg.cn/798f1dfa285a46b7854855e28b5064e1.png
[4cbaa798e7e64c7ca04c07ad93fa5e0c.png]: https://img-blog.csdnimg.cn/4cbaa798e7e64c7ca04c07ad93fa5e0c.png
[23a00e16bd584021b5aba30948d31be6.png]: https://img-blog.csdnimg.cn/23a00e16bd584021b5aba30948d31be6.png
[a3c6e29c0b4245d8a555bc0fdf13bbd4.png]: https://img-blog.csdnimg.cn/a3c6e29c0b4245d8a555bc0fdf13bbd4.png
[7dc0332de6704b3c980d9a9e4f155216.png]: https://img-blog.csdnimg.cn/7dc0332de6704b3c980d9a9e4f155216.png
[9ee5cc932b0440589a4040c94bb3dd5f.png]: https://img-blog.csdnimg.cn/9ee5cc932b0440589a4040c94bb3dd5f.png
[d9e992820d364c62bbd145302332de25.png]: https://img-blog.csdnimg.cn/d9e992820d364c62bbd145302332de25.png
[b1ce8993a14b44a38f16ca50d0a6ffb4.png]: https://img-blog.csdnimg.cn/b1ce8993a14b44a38f16ca50d0a6ffb4.png
[b797143189f7438f95898c0839dd6f3b.png]: https://img-blog.csdnimg.cn/b797143189f7438f95898c0839dd6f3b.png
[fbd075951f8f459b9edb8e96257c9d49.png]: https://img-blog.csdnimg.cn/fbd075951f8f459b9edb8e96257c9d49.png
[47d3ad15849944488b69f9f3db798899.png]: https://img-blog.csdnimg.cn/47d3ad15849944488b69f9f3db798899.png
[https_skimdb.npmjs.com_registry]: https://skimdb.npmjs.com/registry/
[5088102a54a54bdf92642bc56a212d74.png]: https://img-blog.csdnimg.cn/5088102a54a54bdf92642bc56a212d74.png
[02c83ba38dad44b0b5fa7acc71aa8ddc.png]: https://img-blog.csdnimg.cn/02c83ba38dad44b0b5fa7acc71aa8ddc.png
[08cb293aa7c54f10912386c28095b171.png]: https://img-blog.csdnimg.cn/08cb293aa7c54f10912386c28095b171.png
[2c6b60ca6f1b432daebde11411acb794.png]: https://img-blog.csdnimg.cn/2c6b60ca6f1b432daebde11411acb794.png
[f54f7c8ad6db46eaa717af2f80d510cb.png]: https://img-blog.csdnimg.cn/f54f7c8ad6db46eaa717af2f80d510cb.png
[3f94d5222b1748ba9364e1b2aab69ac4.png]: https://img-blog.csdnimg.cn/3f94d5222b1748ba9364e1b2aab69ac4.png
[2a3ca6d7cad24cdbbb1c79d2a7fdc6b9.png]: https://img-blog.csdnimg.cn/2a3ca6d7cad24cdbbb1c79d2a7fdc6b9.png
[2c377a47da734a86821c753f5c04c576.png]: https://img-blog.csdnimg.cn/2c377a47da734a86821c753f5c04c576.png
[fcc30002a4ad4dd28d9e153450c8e939.png]: https://img-blog.csdnimg.cn/fcc30002a4ad4dd28d9e153450c8e939.png
[b4dc9509f4754e10883a74dd1154bf8c.png]: https://img-blog.csdnimg.cn/b4dc9509f4754e10883a74dd1154bf8c.png
[937210b3a8d34646895090a4daa33e8b.png]: https://img-blog.csdnimg.cn/937210b3a8d34646895090a4daa33e8b.png
[1ceb1d8d93ac4d04bee53c3dfc777b8a.png]: https://img-blog.csdnimg.cn/1ceb1d8d93ac4d04bee53c3dfc777b8a.png
[5a3414f4adf847ee8c67ef1d8aa68669.png]: https://img-blog.csdnimg.cn/5a3414f4adf847ee8c67ef1d8aa68669.png
[c08f8834bfa54812b3bfa9dd59ada17a.png]: https://img-blog.csdnimg.cn/c08f8834bfa54812b3bfa9dd59ada17a.png
[vue_Cannot read properties of undefined _reading _indexOf_aiyouweihei_001_-CSDN]: https://blog.csdn.net/aiyouweihei_001/article/details/128957625
[5c6846dc140f4ef4bce7bbaa3517b4ce.png]: https://img-blog.csdnimg.cn/5c6846dc140f4ef4bce7bbaa3517b4ce.png
[d72c5dea99da41638104684122e9ab15.png]: https://img-blog.csdnimg.cn/d72c5dea99da41638104684122e9ab15.png