初次使用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则会显示如下界面，则表示运行成功！