> 作者：threedayman
>
> 来源：[恒生LIGHT云社区](https://developer.hs.net/thread/1700)

## **安装node.js**

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。

下载地址[http://nodejs.cn/download/](http://nodejs.cn/download/)** 选择对应版本进行安装**

安装完之后运行以下命令验证安装是否成功,出现对应得版本号信息即为安装成功。

```
C:\Users\hspcadmin>node -v
v16.13.0
```

## **安装cnpm**

npm（node package manager）是node.js的包管理器，用于node插件管理。

因为npm安装插件从国外服务器上下载，受网络影响较大。cnpm从淘宝镜像中拉取相关插件，减少因为网络等原因造成的异常。

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

安装完成后通过以下命令来查看是否安装成功,出现版本信息即表明安装成功。

```
C:\Users\hspcadmin>cnpm -v
cnpm@7.1.0 (C:\Users\hspcadmin\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.15 (C:\Users\hspcadmin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@16.13.0 (D:\software\nodejs\node.exe)
npminstall@5.3.1 (C:\Users\hspcadmin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\hspcadmin\AppData\Roaming\npm
win32 x64 10.0.19041
registry=https://registry.npmmirror.com
```

## **安装vue-cli**

vue-cli 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

```
cnpm install -g @vue/cli
```

运行以下命令确认是否安装成功

```
C:\Users\hspcadmin>vue -V
@vue/cli 4.5.15
```

## **项目创建**

通过vue-cli创建项目

```
D:\vueproject>vue create vue-hello

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
```

**选择默认Default ([Vue 2] babel, eslint)选项**

```
success Saved lockfile.
Done in 49.84s.
⚓  Running completion hooks...

?  Generating README.md...

?  Successfully created project vue-hello.
?  Get started with the following commands:

$ cd vue-hello
 $ yarn serve
```

创建成功后出现以上提示信息。

## **运行创建的项目**

```
D:\vueproject>cd vue-hello
D:\vueproject\vue-hello>npm run serve

> vue-hello@0.1.0 serve
> vue-cli-service serve

INFO  Starting development server...
98% after emitting CopyPlugin

DONE  Compiled successfully in 6318ms                                                                       下午7:25:14

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.114.25:8080/

Note that the development build is not optimized.
  To create a production build, run yarn build.
```

访问 [http://localhost:8080/](http://localhost:8080/) 出现以下页面

![image-20211201192628987.png](https://developer.hs.net/storage/attachments/2021/12/03/eJCLbtb59tza3KfzriJFm9Ih9Ojs9TxvhYfKwqSG_thumb.png "4053")

**至此我们第一个vue的项目已经运行起来了。**

**更多VUE知识请参考官网[https://cn.vuejs.org/](https://cn.vuejs.org/)**

ITPub博客

从0开始学VUE - 运行第一个VUE项目

最新文章