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