测试开发技术网站

[【原文链接】Vue创建项目快速体验](http://devops-dev.com/article/455)

# 一、使用vue命令创建项目

（1）首先需要安装Nodejs，如未安装可参考 [Win10系统安装Nodejs](http://devops-dev.com/article/387)

（2）打开cmd窗口执行如下命令安装vue
```bash
# 使用npm 安装
npm install -g @vue/cli
# 或者使用 yarn 命令安装
yarn global add @vue/cli
```

（3）执行如下命令，查看版本，说明安装成功
```bash
C:\Users\Administrator>vue --version
@vue/cli 5.0.8

C:\Users\Administrator>
```

（4）然后在命令行进入要存放项目的目录，执行如下命令创建项目
```bash
vue create vue_demo
```
如下，过程中可能会涉及到选择vue版本以及选择npm工具还是yarn工具，选择后按回车即可继续创建，如下创建成功
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/40f9a772-695d-11ed-9e3d-0242ac110002.png)

（5）如下，可以看到整个vue项目框架目录都已经创建好了
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/b1087c3c-695d-11ed-9e3d-0242ac110002.png)

（6）进入项目目录，执行npm run serve 即可启动项目
```bash
cd vue_demo
npm run serve
```
执行如下
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/260ecfea-695e-11ed-9e3d-0242ac110002.png)

（7）在浏览器中打开 127.0.0.1:8080 即可打开页面了，如下
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/689f32be-695e-11ed-9e3d-0242ac110002.png)

# 二、使用npm命令创建VUE项目
（1）打开cmd窗口，进入代码存放目录，然后执行如下命令
```bash
npm init vue@latest
```

（2）出现如下图所示的提示，输入y然后继续回车
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/05630cca-0ebd-11ee-871c-0242ac110004.png)

（3）然后出现设置项目名称的提示，比如这里设置vue_demo
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/36df24aa-0ebd-11ee-871c-0242ac110004.png)

（4）然后在接下来的提示中直接回车保持默认即可
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/a44d3cf2-0ebd-11ee-871c-0242ac110004.png)

（5）然后根据提示执行如下命令
```bash
cd vue_demo
npm install
```
当然这里为了提高执行速度，可以参照如下命令将npm命令替换为cnpm，因为cnpm是npm的镜像，安装速度相对较快。当然如果尚未安装cnpn，则可以通过国内的源安装cnpm命令，如下所示。
```bash
cd vue_demo
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
```
安装过程如下图所示。
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/0317e952-0ebf-11ee-871c-0242ac110004.png)

（6）然后执行如下命令运行项目
```bash
npm run dev
```
执行结果如下图所示，表示运行成功
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/2f9175fc-0ebf-11ee-871c-0242ac110004.png)

（7）此时可以在浏览器中打开 http://127.0.0.1:5173/ ，打开页面如下图所示，表示运行成功。
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/4fb5a092-0ebf-11ee-871c-0242ac110004.png)

测试开发技术网站

博客