之后主要是新建了src/store/index.js作为store，修改了src/views/framework.vue实现了一个从store中取值并且修改值的示例，最后在src/main.js引用了store，相关commit id为a549808。
// src/store/index.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { text: "Value" } const getters = { getText(state) { return state.text; } } const mutations = { setText: (state, text) => { state.text = text; } } export default new Vuex.Store({ state, mutations, getters }); <!-- src/views/framework.vue --> <template> <div> <section> <img src="" alt=""> <img src="" alt=""> <div>{{ msg }}</div> <button @click="toast">Alert</button> </section> <section> <router-link to="/tab-a">TabA</router-link> <router-link to="/tab-b">TabB</router-link> <router-view /> </section> <section> <button @click="setVuexValue">Set Vuex Value</button> <div>{{ text }}</div> </section> </div> </template> <script> import { mapState } from "vuex"; export default { name: "FrameWork", data: () => ({ msg: "Example" }), computed: mapState({ text: state => state.text }), methods: { toast: function(){ window?.alert("ExampleMessage"); }, setVuexValue: function(){ this.$store.commit("setText", "New Value"); } } } </script> <style scoped lang="scss"> @import "../common/styles.scss"; .vue{ width: 100px; } .vue-large{ width: 300px; } .example{ color: $color-blue; font-size: 30px; } section{ margin: 10px; } </style> // src/main.js import Vue from "vue"; import App from "./App.vue"; import Store from "./store"; import Router from "./router"; const app = new Vue({ router: Router, store: Store, ...App, }); app.$mount("#app"); 配置ESLint正常情况下开发我们是需要配置ESLint以及prettier来规范代码的，所以我们需要配置一下，配置完成ESLint的commit id为9ca1b7b。
$ yarn add -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier vue-eslint-parser根目录下建立.editorconfig、.eslintrc.js、.prettierrc.js，进行一些配置，当然这都是可以自定义的，不过要注意prettier和eslint规则冲突的问题。
<!-- .editorconfig --> root = true [*] charset = utf-8 indent_style = space indent_size = 4 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true // .prettierrc.js module.exports = { "printWidth": 100, // 指定代码长度，超出换行 "tabWidth": 4, // tab 键的宽度 "useTabs": false, // 不使用tab "semi": true, // 结尾加上分号 "singleQuote": false, // 使用单引号 "quoteProps": "preserve", // 不要求对象字面量属性是否使用引号包裹 "jsxSingleQuote": false, // jsx 语法中使用单引号 "trailingComma": "es5", // 确保对象的最后一个属性后有逗号 "bracketSpacing": true, // 大括号有空格 { name: 'rose' } "jsxBracketSameLine": false, // 在多行JSX元素的最后一行追加 > "arrowParens": "avoid", // 箭头函数，单个参数不强制添加括号 "requirePragma": false, // 是否严格按照文件顶部的特殊注释格式化代码 "insertPragma": false, // 是否在格式化的文件顶部插入Pragma标记，以表明该文件被prettier格式化过了 "proseWrap": "preserve", // 按照文件原样折行 "htmlWhitespaceSensitivity": "ignore", // html文件的空格敏感度，控制空格是否影响布局 "endOfLine": "lf" // 结尾是 \n \r \n\r auto } // .eslintrc.js module.exports = { parser: "vue-eslint-parser", extends: [ "eslint:recommended", "plugin:prettier/recommended", "plugin:vue/recommended", "plugin:prettier/recommended", ], parserOptions: { ecmaVersion: 2020, sourceType: "module", }, env: { browser: true, node: true, commonjs: true, es2021: true, }, rules: { // 分号 "semi": "error", // 对象键值引号样式保持一致 "quote-props": ["error", "consistent-as-needed"], // 箭头函数允许单参数不带括号 "arrow-parens": ["error", "as-needed"], // no var "no-var": "error", // const "prefer-const": "error", // 允许console "no-console": "off", }, };