【非专业前端】Vue UI 之 建立Vuetify工程

时间:2021-09-20 13:36:11

先建立一个工程【Webpack】

【非专业前端】Vue UI 之 建立Vuetify工程

..

【非专业前端】Vue UI 之 建立Vuetify工程

..建立好之后,进入目录,添加vuetify插件

cd vuetify-demo

vue add vuetify【会出错】

npm install vuetify --save【要用这个】

 ..先看错误的

【非专业前端】Vue UI 之 建立Vuetify工程

..可以看到【vue add vuetify】失败了

官方文档提供的步骤是

【非专业前端】Vue UI 之 建立Vuetify工程

【非专业前端】Vue UI 之 建立Vuetify工程

问题就出在第一步,因为两种创建工程的方式,生成的目录结构不一样的。请看

【非专业前端】Vue UI 之 建立Vuetify工程

..

【非专业前端】Vue UI 之 建立Vuetify工程

..此时我们再加入vuetify,肯定成功

【非专业前端】Vue UI 之 建立Vuetify工程

 ..而用webpack生成的目录是这个样子的

【非专业前端】Vue UI 之 建立Vuetify工程

以Webpack建立的工程,要这样添加Vuetify

npm install vuetify --save

 ..

【非专业前端】Vue UI 之 建立Vuetify工程

..最后用Webstorm打开

【非专业前端】Vue UI 之 建立Vuetify工程

..

【非专业前端】Vue UI 之 建立Vuetify工程

..

【非专业前端】Vue UI 之 建立Vuetify工程

最后在看官方创建的

执行

cd my-app

npm run serve

 ..

【非专业前端】Vue UI 之 建立Vuetify工程

..

http://localhost:8080/#/

 【非专业前端】Vue UI 之 建立Vuetify工程

哟~这个吊【非专业前端】Vue UI 之 建立Vuetify工程

 总结一下

官方:

vue create my-app

cd my-app

vue add vuetify

Webpack:

vue init webpack vuetify-demo

cd vuetify-demo

npm install vuetify --save