一个技术小白的Vue cli3 + Vuetify之旅

3,661 阅读2分钟

首先首先,我真的是一个第一次写文章的小菜j,也不知道该怎么写,所以可能写的不是很详细,也会有其他遗漏的东西。其次对Vuetify的认知很浅,还只停留在会用 --, 只是我真的在搭项目的过程中无数次的碰壁+踩坑(比如引用成功后webpack打包出现问题,以及打包没问题却样式不成功)历经几番之后成功了,就想把成功的步骤写下来。省的自己又忘。

作为一个真的不关注技术的菜鸟,如果不是别人提起来要用vuetify,我可能到现在还不知道它的存在。不得不说 Vuetify的设计风格,两个字概括就是高级。就是熟练度不够,使用起来不是很得心应手。

Vuetify

Vuetify相对比其他组件库的好处:

  • Vue的语义组件框架
  • Material Design 设计规范
  • 组件更多,每一个组件都是手工制作。
  • 页面主题更加简洁大气,高级。

Vuetify需要在Vue Cli3的基础上进行使用 (天真的没有注意到这点,哭的很惨,开始倒是直接用了,之后的问题都是打包的时候遇到的问题(好惨一女的T^T))

Vue cli3

安装步骤:

1.npm install -g @vue/cli 或者yarn global add @vue/cli(安装时出现无法识别,故选择npm)

  • 如果出现4048报错,解决办法:在cmd窗口输入npm cache clean --force
  • 还有一种不成功的情况,是需要卸载 vue cli2 脚手架。
  • 成功后 vue --version 查看版本

2.vue create mia-app (mia-app为项目文件名称)

3.选择默认(default)还是手动(Manually) 选择default 一路回车 第一次配置选择手动 按上下键选择

选择配置列表: 空格键 选中或取消 A键为全选
之后就是一些css预处理以及语法检查方法的配置

4.下载依赖之后完成

进入文件 安装vue cli3脚手架完成。

Vue+Vuetify的安装

按照官网文档给的命令行:vue add vuetify

选择默认配置设置 Default 下载依赖 之后运行项目命令: npm run serve

安装成功~~~~~!

But!!!这个时候如果直接写项目,然后进行webpack打包的话就会出现问题,项目中的样式是ok的,但是打包之后的index.html文件打开白屏

这个时候就乖乖的配置vue.config.js文件就好(下面都是基本配置,高级的我也还不会 - -,)

如果还是不行的话,在main.js中导入css文件就可

再npm run serve启动项目,build打包就可以看到效果啦

ok 完美结束~!

哦!!!对!!!再加一句,记得把router里面的mode:'history'改为'hash'否则可能没有办法路由跳转哦

补充:

最近搭建项目发现会报错,说是引入的错误,改成自定义配置