一个vue前端框架搭建

搭建过程中启动提示缺少模块 按提示安装即可

1.首先安装vue-cli脚本架，创建vue2.0项目 参考vue官网

2.然后ui框架 这里我安装的是element-ui 走按需引用 然后创建el/index.js 复制按需引用的代码（参考element-ui官网）

3. 在mian.js中引用 import ‘./el/index.js’;

4.安装国际化（不需要国际化的可以忽略） 参考以下步骤：

• 创建i18n/index.js 代码如下

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import locale from 'element-ui/lib/locale';
import messages from './lang';

window.VueI18n = VueI18n;

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'zh',
  fallbackLocale: 'zh',
  silentFallbackWarn: true,
  silentTranslationWarn: true,
  messages: messages
});
locale.i18n((key, value) => i18n.t(key, value));
export default i18n;

• 创建如下目录
  
• lang/index.js代码如下

import en from './en';
import zh from './zh';
export default {
  en,
  zh
};

• en和zh代码如下：

'use strict';

exports.__esModule = true;
exports.default = {
  el: {
    colorpicker: {
      confirm: 'OK',
      clear: 'Clear'
    }
    // ...
};

'use strict';

exports.__esModule = true;
exports.default = {
  el: {
    colorpicker: {
      confirm: '确定',
      clear: '清空'
    }
    // ...
};

• mian.js中引用

import i18n from './i18n';
new Vue({
  i18n,
  el: '#app',
  render: h => h(App),
}).$mount('#app')

５.创建路由模块

创建router/index.js,代码如下：

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

const routes = [
  {
    path: '/',
    redirect: '/home' //重定向
  },
  {
    path: '/home',
    name: 'home',
    meta: {
      title: '首页',
      authCode: 'default',
      isShow: true
    },
    component: resolve => require(['@/views/home/index.vue'], resolve),
    children: []
  }
];
const router = new VueRouter({
  routes 
})
Vue.use(VueRouter);

export default router;

• main.js中引用

import router from './router'

//...

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

简单的框架就搭建好了，在src/view文件中创建组件，在router中配置路由，在i18n中设置国际化，国际化使用方式为 $t(‘el.el.colorpicker.clear’)