Vue 使用 UI 组件库 Vuetify 创建项目

前端一直尝试在学习,也断断续续的使用着 Vue.js 然而我的大脑缓存太不给力了,总是学了就忘,忘了就查,查了再用,用完了继续忘,总是去搜索也是麻烦,所以决定还是自己记录一下。

创建项目

  • 使用 Vue UI 创建项目

    $ vue ui

    访问 http://localhost:8000 操作即可。( 这页面很酷啊!)


  • 使用 Vue CLI 创建项目

    会在当前路径下新建一个项目名称的文件夹。

    $ vue create 项目名称

    这里使用按键 j/k方向键 上下选择,回车键 确定选择,我这里选择 Manually select features 进行手动选择。

    Vue CLI v4.2.3
    ? Please pick a preset: 
    first-preset (router, babel, eslint) 
    default (babel, eslint) 
    ❯ Manually select features 

    使用 空格键 勾选 ✔︎ 回车键进入下一步。

    Vue CLI v4.2.3
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: 
    ◉ Babel
    ◯ TypeScript
    ◯ Progressive Web App (PWA) Support
    ◉ Router
    ◉ Vuex
    ❯◉ CSS Pre-processors
    ◉ Linter / Formatter
    ◯ Unit Testing
    ◯ E2E Testing

    因为我选择了 Router ,所以还有一个选择,y 的话,就是使用 History 模式,否则就是 Hash 模式。

    Vue CLI v4.2.3
    ...
    ? Use history mode for router? (Requires proper server setup for index fallback 
    in production) (Y/n) y

    我还选择了 CSS Pre-processors ,所以继续选择,这里我选择了 Less

    Vue CLI v4.2.3
    ...
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
    by default): 
    Sass/SCSS (with dart-sass) 
    Sass/SCSS (with node-sass) 
    ❯ Less 
    Stylus 

    图个省事儿,直接选择 ESLint + Prettier

    Vue CLI v4.2.3
    ...
    ? Pick a linter / formatter config: 
    ESLint with error prevention only 
    ESLint + Airbnb config 
    ESLint + Standard config 
    ❯ ESLint + Prettier 

    这里可以多选,我个人选择 Lint on save

    Vue CLI v4.2.3
    ...
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
    > to invert selection)
    ❯◉ Lint on save
    ◯ Lint and fix on commit

    这里选择配置文件单独存放还是全都放在一个文件里里,我选择 In dedicated config files 独立存放,看着舒服。

    Vue CLI v4.2.3
    ...
    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    ❯ In dedicated config files 
    In package.json 

    是否把当前的项目创建配置作为一个预设配置,方便下次快速创建。

    Vue CLI v4.2.3
    ...
    ? Save this as a preset for future projects? (y/N) 

运行项目

 $ cd 项目名称
 $ npm run serve

访问 http://localhost:8080

Vuetify 安装

接下来开始使用 Vuetify UI 组件库。

这里我选择用 Vue UI 进行安装。( 就是想用这个很酷的管理页面 )

也可以使用其他的安装方式 Vuetify 入门指南

先将当前创建的项目导入到 Vue 项目管理器

导入完成后从左侧菜单栏进入 插件

右侧 添加插件

输入 Vuetify 选中第一个,右下角 安装

完成安装后,我们再访问 http://localhost:8080 可以看到新的界面。

本地依赖字体和图标

Vuetify 安装完成后, 项目路径下 public/index.html 会被增加 2个 stylesheet

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

默认是使用的 CDN 访问,我需要作为本地依赖:

$ npm install @mdi/font -D
$ npm install material-design-icons-iconfont -D

安装完成后,修改项目路径下 src/plugins/vuetify.js 分别 import 这两个 css

import Vue from "vue";
import Vuetify from "vuetify/lib";
import "@mdi/font/css/materialdesignicons.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";

Vue.use(Vuetify);

export default new Vuetify({});

然后删除 public/index.html 里的 2个 stylesheet ,再访问就不会像之前那么慢了。