vuetify模板零基础入门

第一次接触vue，网上的文章一大堆，也看了官方的教程，还是没入到门。

自己折腾半天后，终于运行起第一个UI，过程记录一下。

1、vue环境的安装与配置：

vue的环境配置不多说了，需要安装node.js

查看vue版本：vue -V

注意V是大写，或者 vue --version

node.js的版本：

2、从官网下载一个模板：

https://store.vuetifyjs.com/

或者：

https://vuetifyjs.com/zh-Hans/resources/themes/

下载的时候要先注册，选择免费的模板下载。标有Free的即是免费的模板。

先加到购物车，会显示0元。购物成功后，然后会把链接发到你注册的邮箱。

，点击邮箱里面的链接即可下载。

打开邮箱的链接，显示下载界面：

我下载的这套。下载后的文件为：material-dashboard-pro-theme-free-v1.2.1.zip

3、模板文件的解压：

下载后解压，解压后，里面有一个theme.zip文件，再将此文件解压。

最终得到这样一个文件夹：

4、模板文件的安装和使用

（1）安装 vue cli

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

cnpm install -g vue-cli

如果提示cnpm没有安装，就先执行npm install cnpm -g --registry=https://registry.npm.taobao.org

从taobao上安装cnpm.

cnpm安装成功后，输入cnpm -v可以查看cnpm的版本，即表示成功。

vue-cli执行成功后显示如下：

（2）解压下载的模板文件

在CMD下cd 到解压后的文件夹：F:\Vuetify\VuetifyDemo\temp\material-dashboard-pro-theme-free-v1.2.1\theme

（3）模板的使用

命令行输入cnpm install

文件夹下面会添加一个node_modules文件夹，这就是需要的依赖文件。

 

（4）cnpm run dev

如果显示yarn serve错误，则需要重新安装yarn serve

启动成功后显示：

浏览器中打开：http://localhost:8080/

终于看到UI了。

 

网上下载的vuetify模板解压后，一般需要执行下面几个命令：

cnpm install -g vue-cli

cnpm install

成功后，即要启动网站的服务：

cnpm run dev

或者npm run serve

 

 

# 配置镜像

npm config set registry https://registry.npm.taobao.org

# 查看当前镜像地址

npm config get registry

# 取消镜像

npm config delete registry