feat(基础代码架构): 项目基础代码初始化,目前只有vue 全家桶

Author: 白唯

.env.development

@@ -0,0 +1,7 @@
+NODE_ENV=development
+// VUE_APP_BASE_URL = //10.10.10.115:8002
+VUE_APP_BASE_URL = //apitest.cuidc.net
+VUE_APP_BASE_EDITOR_URL = //editorapitest.cuidc.net
+VUE_APP_EDITOR_JS = //editortest.cuidc.net
+VUE_APP_UPLOADED_URL = //bus.cuidc.net/
+VUE_APP_EDITOR_URL_AUTH = a453964db52ff10ad0a3adf4be4dd4e5

.env.preview

@@ -0,0 +1,6 @@
+NODE_ENV=production
+VUE_APP_BASE_URL = //apitest.cuidc.net
+VUE_APP_BASE_EDITOR_URL = //editorapitest.cuidc.net
+VUE_APP_UPLOADED_URL = //bus.cuidc.net/
+VUE_APP_EDITOR_JS = //editortest.cuidc.net
+VUE_APP_EDITOR_URL_AUTH = 7f35b26c51e980153763ee996542f541

.env.production

@@ -0,0 +1,9 @@
+NODE_ENV=production
+VUE_APP_BASE_URL = //api.cuidc.net
+VUE_APP_BASE_EDITOR_URL = //editorapi.cuidc.net
+VUE_APP_EDITOR_JS = //editor.cuidc.net
+VUE_APP_UPLOADED_URL = //bus-acc.cuidc.net/
+VUE_APP_EDITOR_URL_AUTH = e3e5e9488f3e2e2857fc045b9c48566b
+
+
+

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+    es6: true
+  },
+  plugins: ['prettier', 'vue', '@typescript-eslint/eslint-plugin'],
+  rules: {
+    'prettier/prettier': 'error'
+  },
+  extends: ['standard', 'plugin:vue/essential', 'plugin:prettier/recommended']
+}

.gitignore

@@ -21,3 +21,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# local docs
+todo-list.md

.gitlab-ci.yml

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 999,
+  singleQuote: true,
+  semi: false,
+  trailingComma: 'none',
+  endOfLine: 'lf'
+}

.prettierrc.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }

babel.config.js

@@ -5,14 +5,16 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "commit": "npx cz"
   },
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^3.0.0-0",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "vuex-persistedstate": "^3.1.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.33.0",
@@ -26,15 +28,23 @@
     "@vue/compiler-sfc": "^3.0.0-0",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
+    "babel-eslint": "^10.1.0",
+    "commitizen": "^4.2.1",
+    "cz-conventional-changelog": "3.3.0",
     "eslint": "^6.7.2",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^7.0.0-0",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
-    "typescript": "~3.9.3"
+    "prettier": "^2.1.1",
+    "typescript": "~3.9.3",
+    "vue-property-decorator": "^9.0.0",
+    "vuex-persistedstate": "^3.1.0"
   },
   "eslintConfig": {
     "root": true,
@@ -55,5 +65,33 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog",
+      "disableScopeLowerCase": false,
+      "disableSubjectLowerCase": false,
+      "maxHeaderWidth": 100,
+      "maxLineWidth": 100,
+      "defaultType": "",
+      "defaultScope": "",
+      "defaultSubject": "",
+      "defaultBody": "",
+      "defaultIssues": "",
+      "types": {
+        "feat": {
+          "description": "新增功能",
+          "title": "新增"
+        },
+        "ci": {
+          "description": "部署相关",
+          "title": "CI/CD"
+        },
+        "fix": {
+          "description": "bug 修复",
+          "title": "修复"
+        }
+      }
+    }
+  }
 }

package.json

@@ -1,14 +1,25 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>|
+      <router-link to="/contact">Contact</router-link>
     </div>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
-<style lang="less">
+<script lang="ts">
+import { defineComponent } from 'vue'
+const App: any = defineComponent({
+  created() {
+    console.log('routerList', this.$route)
+  }
+})
+
+export default App
+</script>
+
+<style lang="less" scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -19,11 +30,9 @@
 
 #nav {
   padding: 30px;
-
   a {
     font-weight: bold;
     color: #2c3e50;
-
     &.router-link-exact-active {
       color: #42b983;
     }

src/App.vue

@@ -0,0 +1,17 @@
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding        : 0;
+}
+
+li {
+  display: inline-block;
+  margin : 0 10px;
+}
+
+a {
+  color: #42b983;
+}

src/components/HelloWorld.css

@@ -2,7 +2,7 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
+      For a guide and recipes on how to configure / customize this project,<br />
       check out the
       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
     </p>
@@ -34,16 +34,16 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { defineComponent } from 'vue'
 
-@Options({
-  props: {
-    msg: String
+const HelloWorld = defineComponent({
+  props: { msg: { type: String, default: '' } },
+  created() {
+    console.log(this.msg)
   }
 })
-export default class HelloWorld extends Vue {
-  msg!: string
-}
+
+export default HelloWorld
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/HelloWorld.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>{{ author }}</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const HelloWorld1 = defineComponent({
+  name: 'hello',
+  data() {
+    return {
+      pageName: 'About',
+      author: 'author'
+    }
+  },
+  methods: {
+    caculatePageName() {
+      this.pageName.split(',')
+    }
+  }
+})
+
+export default HelloWorld1
+</script>

src/components/HelloWorld1.vue

@@ -0,0 +1,23 @@
+<template>
+  <div><button>self-button</button></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const SlefButton = defineComponent({
+  name: 'SlefButton',
+  data() {
+    return {
+      pageName: 'About',
+      author: 'author'
+    }
+  },
+  methods: {
+    caculatePageName() {
+      this.pageName.split(',')
+    }
+  }
+})
+export default SlefButton
+</script>

src/components/SelfButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div ref="root" class="hello">
+    <p>{{ p }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import './HelloWorld.css'
+import { defineComponent, ref } from 'vue'
+
+interface Prop {
+  name: string
+}
+
+const TestDemo = defineComponent({
+  name: 'TestDemo',
+  setup(props: Prop) {
+    const root = ref(null)
+    console.log(props)
+    const p = ref(33)
+    return {
+      p,
+      root
+    }
+  },
+  data() {
+    return {
+      pageName: 'About',
+      author: 'kk'
+    }
+  },
+  methods: {
+    caculatePageName() {
+      this.pageName.split(',')
+    }
+  }
+})
+export default TestDemo
+</script>

src/components/TestDemo copy.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>{{ author }}</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const TestDemo = defineComponent({
+  name: 'TestDemo',
+  data() {
+    return {
+      pageName: 'About',
+      author: 'author'
+    }
+  },
+  methods: {
+    caculatePageName() {
+      this.pageName.split(',')
+    }
+  }
+})
+export default TestDemo
+</script>

src/components/TestDemo.vue

@@ -0,0 +1,5 @@
+/**  跟应用全局相关的静态配置放在这里  */
+export default {
+  name: '12',
+  logo: '34'
+}

src/config/app.ts

@@ -0,0 +1,4 @@
+declare interface Book {
+  author?: string
+  pageName: string
+}

src/global.d.ts

@@ -2,5 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import AppConfig from './config/app'
 
+const app: any = createApp(App)
+app.config.globalProperties = AppConfig
+console.log('config', app.config)
 createApp(App).use(store).use(router).mount('#app')

src/main.ts

@@ -0,0 +1,17 @@
+import { RouteRecordRaw } from 'vue-router'
+
+/** 关于我们页面的路由配置 */
+const AboutRouter: RouteRecordRaw = {
+  path: '/about',
+  name: 'about',
+  component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
+  children: [
+    {
+      path: 'me',
+      name: 'aboutMe',
+      component: () => import(/* webpackChunkName: "about-me" */ '@/views/AboutMe.vue')
+    }
+  ]
+}
+
+export default AboutRouter

src/router/about.ts

@@ -1,22 +1,33 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/Home.vue'
 
+/** 自动加载其他路由模块 */
+const files = require.context('.', true, /\.ts$/)
+const modules: Array<RouteRecordRaw> = []
+files.keys().forEach((key) => {
+  if (key === './index.ts') return
+  modules.push(files(key).default)
+})
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
     component: Home
   },
+  ...modules,
   {
-    path: '/about',
-    name: 'About',
+    path: '/contact',
+    name: 'Contact',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Contact.vue')
   }
 ]
 
+console.log(routes)
+
 const router = createRouter({
   history: createWebHashHistory(),
   routes

src/router/index.ts

@@ -1,5 +1,17 @@
 declare module '*.vue' {
+  import { createStore } from 'vuex'
   import { defineComponent } from 'vue'
   const component: ReturnType<typeof defineComponent>
   export default component
 }
+
+declare module '*.tsx' {
+  const component: any
+  export default component
+}
+
+/* declare module '@vue/runtime-core' {
+  interface ComponentInternalInstance {
+    $store: string
+  }
+} */

src/shims-vue.d.ts

@@ -1,12 +1,19 @@
 import { createStore } from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
 
+import mutations from './mutations'
+import modules from './modules'
 export default createStore({
+  strict: true,
   state: {
+    test: 'in'
   },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+  mutations,
+  actions: {},
+  ...modules,
+  plugins: [
+    createPersistedState({
+      paths: ['app']
+    })
+  ]
 })

src/store/index.ts

@@ -0,0 +1,3 @@
+export default {
+  //
+}

src/store/modules/app/actions.ts

@@ -0,0 +1,3 @@
+export default {
+  //
+}

src/store/modules/app/getters.ts

@@ -0,0 +1,5 @@
+export default {
+  __set(state: any, msg: { key: string; val: any }) {
+    state[msg.key] = msg.val
+  }
+}

src/store/modules/app/mutations.ts

@@ -0,0 +1,5 @@
+export default {
+  language: '',
+  theme: 'light',
+  version: '0.0.1'
+}

src/store/modules/app/state.ts

@@ -0,0 +1,19 @@
+// https://vuex.vuejs.org/en/modules.html
+
+const files = require.context('.', true, /\.ts$/)
+const modules: any = {}
+
+files.keys().forEach((key) => {
+  if (key === './index.ts') return
+  const path = key.replace(/(\.\/|\.ts)/g, '')
+  const [namespace, imported] = path.split('/')
+  console.log(namespace, imported)
+  if (!modules[namespace]) {
+    modules[namespace] = {
+      namespaced: true
+    }
+  }
+  modules[namespace][imported] = files(key).default
+})
+
+export default modules

src/store/modules/index.ts

@@ -0,0 +1,6 @@
+/** 一个封装常规 mutation 操作的常规方法  */
+export default {
+  __set(state: any, msg: { key: string; val: any }) {
+    state[msg.key] = msg.val
+  }
+}

src/store/mutations.ts

@@ -0,0 +1,2 @@
+// 全局颜色变量
+@color-primary: #ff0000;

src/styles/_variables.less

@@ -0,0 +1,21 @@
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color      : #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+
+.hello {
+  color    : red;
+  font-size: 20px;
+
+  &-test {
+    color: #ff0000;
+  }
+}

src/styles/test.less

@@ -1,5 +1,56 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div ref="root" class="about">
+    <h1>{{ c }}</h1>
+    <h2>{{ b.pageName }}</h2>
+    <hello-world />
+    <test-demo />
+    <router-link to="/about/me">kjfkjsk</router-link>
+    <router-view />
+    <self-button />
   </div>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import TestDemo from '../components/TestDemo.vue'
+import HelloWorld from '../components/HelloWorld.vue'
+import SelfButton from '../components/SelfButton.vue'
+
+const About = defineComponent({
+  setup() {
+    const c = ref(0)
+    const root = ref(null)
+    return { root, c }
+  },
+  components: {
+    TestDemo,
+    HelloWorld,
+    SelfButton
+  },
+  data() {
+    return {
+      b: {
+        pageName: 'About',
+        author: 'kk'
+      }
+    }
+  },
+  conputed: {
+    fullName() {
+      return this.b.pageName + this.b.author
+    }
+  },
+  watch: {
+    fullName(newName) {
+      console.log(newName)
+    }
+  },
+  methods: {
+    caculatePageName() {
+      this.b.pageName.split(',')
+    }
+  }
+})
+
+export default About
+</script>

src/views/About.vue

@@ -0,0 +1,42 @@
+<template>
+  <div ref="root" class="about">
+    <p>about-me</p>
+    <test-demo />
+    <self-button />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+import TestDemo from '@/components/TestDemo.vue'
+import SelfButton from '@/components/SelfButton.vue'
+
+const AboutMe = defineComponent({
+  setup() {
+    onMounted(() => {
+      console.log('mounted is creatd')
+    })
+    const root = ref(null)
+    return { root }
+  },
+  components: {
+    TestDemo,
+    SelfButton
+  },
+  data() {
+    return {
+      book: {
+        pageName: 'Chapter 1',
+        author: 'swift'
+      }
+    }
+  },
+  methods: {
+    caculatePageName(): string {
+      return this.book.pageName.split('-').reverse().join()
+    }
+  }
+})
+
+export default AboutMe
+</script>

src/views/AboutMe.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <hello-world />
+    <hello-world1 />
+  </div>
+</template>
+
+<script lang="ts">
+// import HelloWorld from '@/components/HelloWorld1.vue' // @ is an alias to /src
+import { defineComponent } from 'vue'
+import HelloWorld from '../components/HelloWorld.vue'
+import HelloWorld1 from '../components/HelloWorld1.vue'
+
+const Home = defineComponent({
+  components: {
+    HelloWorld,
+    HelloWorld1
+  },
+  hello() {
+    console.log('hahha')
+    return 'nihao'
+  }
+})
+
+export default Home
+</script>

src/views/Contact.vue

@@ -1,18 +1,37 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+  <div>
+    <span class="hello">hahahah</span>
+    <hello-world msg="home" />
   </div>
 </template>
-
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
+import { defineComponent } from 'vue'
+import HelloWorld from '@/components/HelloWorld1.vue' // @ is an alias to /src
 
-@Options({
+const Home = defineComponent({
   components: {
     HelloWorld
+  },
+  created() {
+    console.log('routerList', this.$route)
+  },
+  methods: {
+    hello() {
+      console.log('hahha')
+      return 'nihao'
+    }
   }
 })
-export default class Home extends Vue {}
+
+export default Home
 </script>
+
+<style scoped lang="less">
+.hello {
+  color: red;
+  font-size: 20px;
+  &-test {
+    color: #ff0000;
+  }
+}
+</style>

src/views/Home.vue

@@ -12,29 +12,12 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
+    "types": ["webpack-env"],
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "global.d.ts"],
+  "exclude": ["node_modules"]
 }

todo-list.png

@@ -0,0 +1,9 @@
+module.exports = {
+  css: {
+    loaderOptions: {
+      less: {
+        // data: `@import '@/styles/_variables.scss';`
+      }
+    }
+  }
+}