初次使用VUE-Vuetify框架

由於Node.js平台是在后端運行JavaScript代碼，所以，必須首先在本機安裝Node環境

1.搭建node.js環境

　　1.1目前node.js的最新版本是12.16.2，首先從node.js 官網下載對應平台的安裝程序。

　　1.2安裝完成后，在Windows環境下，請打開命令提示符（使用快捷鍵win+R ，輸入cmd ），然后輸入node -v，如果安裝正常，你應該看到v12.16.2這樣的輸出：

C:\Users\Administrator>node -v
v12.16.2

　　1.3查看npm的版本

　　在我們學習node.js之前我們能先認識一下npm。

　　npm是什么東西，npm (node packge manager)其實是node.js的包管理工具。我們在Node.js上開發時，會用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用，非常繁瑣。於是一個集中管理的工具應運而生：大家都把自己開發的模塊打包后放到npm官網上，如果要使用，直接通過npm安裝就可以直接用，不用管代碼存在哪，應該從哪下載。

其實npm已經在Node.js安裝的時候順帶裝好了。我們在命令提示符或者終端輸入npm -v，應該看到類似的輸出：

C:\Users\Administrator>npm -v
6.14.4

　　1.4　安裝淘寶鏡像，出現版本號即安裝成功。

C:\Users\Administrator>npm install cnpm -g --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm

> ajv@6.12.1 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\ajv
> opencollective-postinstall || true

Thank you for using ajv!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/ajv/donate

+ cnpm@6.1.1
added 686 packages from 954 contributors in 16.539s

　　1.5安裝vue-cli，在命令提示行輸入

cnpm install -g vue-cli

 　　安裝稍微慢點，需要耐心等一會，完成之后在命令行輸入cnpm -v，有版本號則顯示安裝成功

D:\Vue\vuetify>cnpm -v
cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.4 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.16.2 (C:\Program Files\nodejs\node.exe)
npminstall@3.27.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.18362
registry=https://r.npm.taobao.org

　　1.6  配置環境變量，增加NODE_PATH 變量 輸入變量值C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\

　　1.7 下載vuetify模板

 

　　1.8 打開下載的模板文件夾 ，在文件夾路徑頭部加cmd 回車，就會跳轉到指定目錄

 2 運行vuetify模板

　　2.1 命令行輸入cnpm install

D:\Vue\vuetify>cnpm install
√ Installed 29 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 519ms(network 495ms), speed 0B/s, json 0(0B), tarball 0B)

 　　2.2 在命令行輸入cnpm run dev

D:\Vue\vuetify>cnpm run dev

> vuetify-material-dashboard@2.1.0 dev D:\Vue\vuetify
> vue-cli-service serve --open

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

 DONE  Compiled successfully in 36858ms                                                                          9:01:30


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

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

                                                                                                                                

　　2.3　瀏覽器中輸入http://localhost:8080則會顯示如下界面，則表示運行成功！