> 作者：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/)**

從0開始學VUE - 執行第一個VUE專案

相關文章