第一次接触vue,网上的文章一大堆,也看了官方的教程,还是没入到门。
自己折腾半天后,终于运行起第一个UI,过程记录一下。
1、vue环境的安装与配置:
vue的环境配置不多说了,需要安装node.js
查看vue版本:vue -V
注意V是大写,或者 vue --version
node.js的版本:
2、从官网下载一个模板:
或者:
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
# 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm install # 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev
# 配置镜像
npm config set registry https://registry.npm.taobao.org
# 查看当前镜像地址
npm config get registry
# 取消镜像
npm config delete registry