项目实战

前言 上回我们搭了项目，也大概了解了 vue 项目的结构啦，也熟悉一点基本操作，但是一定会感觉这个页面好像有点丑，看不下去，要美化一下。但是我们不是 UI，然后你要是不幸审美和我一样差的话，这个要我们自己搞页面就有点难受了，一般我们会使用模仿他人，或者使用 bootstrap 这样的 UI 库来帮我们搞出一套好看的页面出来，那么 vue 这边咧，它这边也有很多 UI 组件库可以用，并且用起来更加方便舒服，下面我们就用一下饿了么开源的 ElementUI 组件库吧。 引入这个我们先用 npm 装一下依赖 npm install element-ui -S然后他可以全局引入和局部引入，我们就简单粗暴全局引入了，我们直接在 main.js 里面加入下面的代码 import Vue from 'vue'import App from './App'import router from './router'// 开始加import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)// 加到这里Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})这样子我们就全局引入了 ElementUI 了，我们就可以在我们项目的其他地方使用 ElementUI 的组件了。 使用其实 Element 组件的使用不用学的，和 bootstrap 一样，看官方文档就行了，不过它比 bootstrap 更方便易懂，就像我这样，就可以用组件搞出一个好看的按钮了 ...

上一篇通过TodoList的练习，目的是为了让大家理解ES6中各种新特性的实际用途。 最好的学习方法就是实践，所以这节课结合实际项目，来更好的理解和掌握ES6的用途和使用场景，达到灵活运用的目的。 1、模块化 以项目中普遍会有的config.js文件为例，实现export导出： const githubURL = "OUR GITHUB URL HERE";const staticServer = "http://xxx.com";const testsPath = `zaz-${type}-${name}/tests/index.htm?zaz[env]=tests`;const name = "stalker";const type = "mod";const version = "0.0.1";const state = "ok";const description = "JavaScript API to deal with user data";let globalpkg = null; const config = { _static: { name, version, state, description, docs: `${githubURL}/pages/terra/zaz-${type}-${name}`, source: `${githubURL}/Terra/zaz-${type}-${name}`, tests: `${staticServer}/fe/${testsPath}`, dependencies: ['mod.wilson'] }};export default config;再在其他文件中通过import实现导入： import config from './config';//导入ES6模块import { globalpkg } from './config';import factory from './factory'; zaz.use((pkg) => { "use strict"; config.dynamic.globalpkg = pkg; pkg.require(['modFactory'], (modFactory) => { modFactory.create(pkg.utils.deepMerge(config._static, factory)); }); });使用ES6统一的模块化规范，可以提高代码的可读性，更易于维护。 ...