diff --git a/meta.js b/meta.js index a521f9bdd0..4da4a4c895 100644 --- a/meta.js +++ b/meta.js @@ -33,6 +33,11 @@ module.exports = { }, prompts: { + special: { + when: 'isNotTest', + type: 'confirm', + message: '教学专属装逼脚手架', + }, name: { when: 'isNotTest', type: 'string', @@ -74,6 +79,21 @@ module.exports = { type: 'confirm', message: 'Install vue-router?', }, + filter: { + when: 'isNotTest', + type: 'confirm', + message: 'Install filters 全局的filter?', + }, + elementUi: { + when: 'isNotTest', + type: 'confirm', + message: 'Use elementUi?', + }, + vuex: { + when: 'isNotTest', + type: 'confirm', + message: 'Use 模块化管理 vuex?', + }, lint: { when: 'isNotTest', type: 'confirm', @@ -169,7 +189,9 @@ module.exports = { 'test/unit/specs/index.js': "unit && runner === 'karma'", 'test/unit/setup.js': "unit && runner === 'jest'", 'test/e2e/**/*': 'e2e', - 'src/router/**/*': 'router', + 'router.js': 'router', + 'src/filter/**/*': 'filter', + 'src/store/**/*': 'vuex' }, complete: function(data, { chalk }) { const green = chalk.green diff --git a/package.json b/package.json index db88d649df..bc41e9c9b8 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,10 @@ "docs:deploy": "bash ./deploy-docs.sh" }, "devDependencies": { - "vue-cli": "^2.8.1" + "vue-cli": "^2.8.1", + "vue-router": "^3.0.1", + "date-fns": "^1.30.1", + "element-ui": "^2.6.3", + "vuex": "^3.1.0" } } diff --git a/template/package.json b/template/package.json index 207322b98c..5782e86920 100644 --- a/template/package.json +++ b/template/package.json @@ -26,7 +26,10 @@ }, "dependencies": { "vue": "^2.5.2"{{#router}}, - "vue-router": "^3.0.1"{{/router}} + "vue-router": "^3.0.1"{{/router}}, + {{#filter}}"date-fns": "^1.30.1"{{/filter}}, + {{#elementUi}}"element-ui": "^2.6.3"{{/elementUi}}, + {{#vuex}}"vuex": "^3.1.0"{{/vuex}} }, "devDependencies": { {{#lint}} diff --git a/template/src/filter/filter.js b/template/src/filter/filter.js new file mode 100644 index 0000000000..fccb3bd365 --- /dev/null +++ b/template/src/filter/filter.js @@ -0,0 +1,19 @@ +/** + * Created by Administrator on 2019/4/2. + */ +import { format } from 'date-fns'; +export default { + //一般的过滤器 + formatTime(time){ + "use strict"; + if(time){ + return format(time, 'YYYY-MM-DD HH:mm:ss'); + } + }, + multiParam(first,second){ + return first+'-'+second + }, + multiParam2([first,second]){ + return first+'-'+second + } +} diff --git a/template/src/main.js b/template/src/main.js index 48833b5ab7..d9c61490b0 100644 --- a/template/src/main.js +++ b/template/src/main.js @@ -4,18 +4,43 @@ {{/if_eq}} import Vue from 'vue' import App from './App' +{{#vuex}} +import store from './store/modules' +{{/vuex}} {{#router}} -import router from './router' +import routes from './router.js' +import VueRouter from 'vue-router'; +{{#elementUi}} +import ElementUI from 'element-ui'; +import 'element-ui/lib/theme-chalk/index.css'; +{{/elementUi}} +{{#filter}} +import filters from './filter/filter' +{{/filter}} +Vue.use(VueRouter); +const router = new VueRouter({ + mode: 'hash', + routes: routes, +}); {{/router}} - +{{#elementUi}} +Vue.use(ElementUI); +{{/elementUi}} Vue.config.productionTip = false - +{{#filter}} +Object.keys(filters).forEach(key => { + Vue.filter(key, filters[key]) +}) +{{/filter}} /* eslint-disable no-new */ new Vue({ el: '#app', {{#router}} router, {{/router}} + {{#vuex}} + store, + {{/vuex}} {{#if_eq build "runtime"}} render: h => h(App) {{/if_eq}} diff --git a/template/src/router.js b/template/src/router.js new file mode 100644 index 0000000000..18d155dd43 --- /dev/null +++ b/template/src/router.js @@ -0,0 +1,7 @@ +export default [ + { + path: '/', + name: 'index', + component: resolve => require(['./components/HelloWorld.vue'], resolve),//懒加载 + } + ] diff --git a/template/src/router/index.js b/template/src/router/index.js deleted file mode 100644 index 5fa7f9d319..0000000000 --- a/template/src/router/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import Vue from 'vue' -import Router from 'vue-router' -import HelloWorld from '@/components/HelloWorld' - -Vue.use(Router) - -export default new Router({ - routes: [ - { - path: '/', - name: 'HelloWorld', - component: HelloWorld - } - ] -}) diff --git a/template/src/store/common.js b/template/src/store/common.js new file mode 100644 index 0000000000..964e1c5a5a --- /dev/null +++ b/template/src/store/common.js @@ -0,0 +1,16 @@ +export default { + //开启命名控件的方式 + // namespaced: true, + state:{ + commonCount:0 + }, + mutations: { + commonIncrement (state) {//在大多数情况下，payload载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读 + state.commonCount +=1 + } + }, + actions:{ + commonIncrement ({ commit },increment) { + commit('commonIncrement',increment)} + }, +} diff --git a/template/src/store/modules.js b/template/src/store/modules.js new file mode 100644 index 0000000000..1dfd641320 --- /dev/null +++ b/template/src/store/modules.js @@ -0,0 +1,48 @@ +import common from './common'; +import Vue from 'vue'; +import Vuex from 'vuex'; +import createLogger from 'vuex/dist/logger' + +Vue.use(Vuex) +//采用的是 多个分类的形式 +const myPlugin = store => {//此方式可以监控到提交的状态 + // 当 store 初始化后调用 + let prevState = _.cloneDeep(store.state) + store.subscribe((mutation, state) => { + let nextState = _.cloneDeep(state) + // 每次 mutation 之后调用 + // mutation 的格式为 { type, payload } + console.dir(prevState) + console.dir(nextState) + prevState = nextState + + }) +} +const logger = createLogger({ + collapsed: false, // 自动展开记录的 mutation + filter (mutation, stateBefore, stateAfter) { + // 若 mutation 需要被记录，就让它返回 true 即可 + // 顺便，`mutation` 是个 { type, payload } 对象 + return mutation.type !== "aBlacklistedMutation" + }, + transformer (state) { + // 在开始记录之前转换状态 + // 例如，只返回指定的子树 + return state + }, + mutationTransformer (mutation) { + // mutation 按照 { type, payload } 格式记录 + // 我们可以按任意方式格式化 + return mutation.type + }, + logger: console, // 自定义 console 实现，默认为 `console` +}) +export default new Vuex.Store({ + modules: { + common: common, + }, + // plugins: [myPlugin] + plugins: process.env.NODE_ENV !== 'production' + ? [logger] + : [] +})