Vue-cli + Vuetify 学习系列01

创建项目

项目环境

• [email protected]
• vue/[email protected]
• [email protected]
• [email protected]
• [email protected]

  部分依赖因网络问题可能无法顺利安装,以放至文末

初始化项目

• 确认npm 与 @vue/cli已安装
• 指定路径执行vue create vuetify-demo
• 依据个人个风格成功创建脚手架项目
• 项目路径下执行vue add vuetify
• 执行npm run serve查看基本效果,默认端口为8080

确认项目布局

截止发稿前经对比发现Centered可作为登录界面 Google contacts可作为主界面 Sandbox具有参考价值

确认项目规范目录规范

添加或修改如下配置文件(可选,依据个人习惯)

安装拓展依赖

1. npm i axios用于网络通信
2. npm i crypto-js用于加解密
3. vue add i18n用于国际化
4. vue add electron-builder用于electron支持
5. 安装 Material Design Icons,这是 Vuetify 的默认图标字体
   • npm install @mdi/font -D开发环境
   • npm install @mdi/js -D生产环境优化,引入JS SVG

   可选图标库含Material Design Icons、Material Icons、Font Awesome 4 和 Font Awesome 5等参照官方文档

项目关键文件

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import i18n from '@/locales/i18n'

import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  },
  lang: {
    t: (key, ...params) => i18n.t(key, params)
  }
})

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import sc from 'vuetify/es5/locale/zh-Hans'

Vue.use(VueI18n)

const messages = {
  sc: {
    ...require('@/locales/i18n/sc.json'),
    $vuetify: sc
  }
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './plugins/crypto.js'
import vuetify from './plugins/vuetify'

import i18n from './locales/i18n'
import './assets/css/base.scss'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  i18n,
  render: h => h(App)
}).$mount('#app')

添加基本路由

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const login = () => import('views/Login')
const home = () => import('views/home/Home')

export const constantRoutes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: login,
    meta: {
      title: '登录'
    }
  },
  {
    path: '/home',
    component: home,
    meta: {
      title: '首页'
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: constantRoutes
})

export default router

参考模板添加登录界面

参照Centered添加登录组件

参考模板添加管理界面

参照Google contacts添加管理界面

基本演示

相关资源

electron-v9.1.0-win32-x64.zip