config vue:version-JS

config/webpack.config.js

@@ -8,6 +8,7 @@ const base = {
   path: path.join(__dirname, '..')
 }
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
 // const lastStyleLoader = MiniCssExtractPlugin.loader
 const lastStyleLoader = 'style-loader'
 module.exports = {
@@ -42,7 +43,8 @@ module.exports = {
     // 抽离 css 代码
     // new MiniCssExtractPlugin({
     //   filename: '[name].css'
-    // })
+    // }),
+    new VueLoaderPlugin()
   ],
   module: {
     // loaders
@@ -95,6 +97,11 @@ module.exports = {
         // 排除目录
         exclude: /node_modules/,
       },
+      // vue
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
     ]
   },
   // optimization: {
@@ -103,4 +110,12 @@ module.exports = {
   //     chunks: 'all'
   //   }
   // },
+  resolve: {
+    // 自动补全的扩展名
+    extensions: ['.ts', '.js', '.vue', '.json'],
+    // 默认路径代理
+    alias: {
+      '@': path.resolve('src'),
+    }
+  },
 }

forget.txt

@@ -0,0 +1 @@
+静态资源拷贝问题  public/

package.json

@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.7.0",
+    "axios": "^0.19.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2"

src/App.vue

@@ -0,0 +1,35 @@
+<template>
+<div class="app-container">
+<p> {{ title }} </p>
+<p> 作者是 {{ $store.state.author }}</p>
+<div @click="add" class="app-btn">这是按钮</div>
+<router-link to="/home">home</router-link>
+<router-link to="/about">about</router-link>
+<router-view></router-view>
+</div> 
+</template>
+<style scoped lang="less">
+    .app-container {
+.app-btn {
+    color: red;
+}
+}
+</style>
+<script>
+export default {
+    data() {
+        return {
+            title: '这是使用 webpack 构建的'
+        }
+    },
+    methods: {
+        add () {
+            console.log('1111111111111')
+        }
+    },
+    created() {
+        console.log('app 构建了')
+        this.$axios('getUserInfo')
+    },
+}
+</script>

src/main.js

@@ -1,29 +1,16 @@
-const author = 'cyan'
 import './assets/css/index.css'
 import './assets/less/index.less'
 // import './assets/scss/index.scss'
-import {
-  name
-} from './configs/decorator/index'
-console.log(`作者是${author}1`);
-class Bork {
-  //Property initializer syntax
-  instanceProperty = "bork";
-  boundFunction = () => {
-    return this.instanceProperty;
-  };
-
-  //Static class properties
-  static staticProperty = "babelIsCool";
-  static staticFunction = function () {
-    return Bork.staticProperty;
-  };
-}
-console.log(Bork.staticProperty);
-Bork.staticFunction()
-console.log(ENV.API_URL, name);
-// document.querySelector('#btn').onclick = function () {
-//   import('jquery').then(({ default: $ }) => {
-//     $('#app').append('<p> jQuery add </p>')
-//   })
-// }
+import Vue from 'vue'
+import App from './App.vue'
+import router from './plugins/router'
+import store from './plugins/store'
+import VueRouter from 'vue-router'
+import plugins from './plugins'
+Vue.use(VueRouter)
+Vue.use(plugins)
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/plugins/axios/index.js

@@ -0,0 +1,21 @@
+import axios from 'axios'
+
+let instance = axios.create({
+    baseURL: 'api/',
+    timeout: 10 * 1000,
+    headers: {
+        post: {
+            'Content-Type': 'application/json'
+        }
+    },
+    // post json 转 表单 
+    // transformRequest: [function (data) {
+    //   let ret = ''
+    //   for (let it in data) {
+    //     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+    //   }
+    //   return ret
+    // }],
+})
+
+export default instance

src/plugins/index.js

@@ -0,0 +1,9 @@
+import axios from './axios'
+export {
+  axios
+}
+export default {
+  install(Vue) {
+    Vue.prototype.$axios = axios
+  }
+}

src/plugins/router/index.js

@@ -0,0 +1,17 @@
+import VueRouter from 'vue-router'
+import Index from '@/views/Home/index.vue'
+const router = new VueRouter({
+    routes: [{
+            path: '/',
+            component: Index,
+            alias: '/home'
+        },
+        {
+            path: '/about',
+            component: () => import(`@/views/About/index.vue`)
+        }
+    ]
+
+})
+
+export default router

src/plugins/store/index.js

@@ -0,0 +1,19 @@
+  import Vue from 'vue'
+  import Vuex from 'vuex'
+  Vue.use(Vuex)
+  const options = {
+      state: {
+          userInfo: {},
+          author: 'cyan'
+      },
+      mutations: {
+          stateChange(state, {
+              type,
+              val
+          }) {
+              state[type] = val
+          }
+      },
+      actions: {}
+  }
+  export default new Vuex.Store(options)

src/views/About/index.vue

@@ -0,0 +1,19 @@
+<template>
+<div class="about-container">
+<p> {{ title }} </p>
+</div> 
+</template>
+<style>
+.about-container {
+
+}
+</style>
+<script>
+export default {
+    data() {
+        return {
+            title: '这是使用 about'
+        }
+    },
+}
+</script>

src/views/Home/index.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="home-container">
+<p> {{ title }} </p>
+<div class="app-btn" @click="changeAuthor">changeAuthorName</div>
+</div> 
+</template>
+<style>
+.home-container {
+
+}
+</style>
+<script>
+export default {
+    data() {
+        return {
+            title: '这是使用 home'
+        }
+    },
+methods: {
+    changeAuthor() {
+        this.$store.commit('stateChange', { type: 'author', val: 'you'})
+}
+},
+}
+</script>

yarn.lock

@@ -1388,6 +1388,14 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.9.0.tgz?cache=0&sync_timestamp=1574807521525&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c"
   integrity sha1-JDkOatYThrCnRyZXVNKhchnehiw=
 
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.npm.taobao.org/axios/download/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha1-jgm/89kSLhM/e4EByPvdAO09Krg=
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 babel-loader@^8.0.6:
   version "8.0.6"
   resolved "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
@@ -2410,6 +2418,13 @@ [email protected], debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3073,6 +3088,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+[email protected]:
+  version "1.5.10"
+  resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.9.0"
   resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.9.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
@@ -3859,6 +3881,11 @@ is-buffer@^1.1.5:
   resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha1-76ouqdqg16suoTqXsritUf776L4=
 
+is-buffer@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
+  integrity sha1-PlcvI8hBGlz9lVfISeNmXgspBiM=
+
 is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npm.taobao.org/is-callable/download/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"