（23）打鸡儿教你Vue.js

实例：

模板语法
vue-router，vuex以及调式方法介绍
打包部署：

npm run build

Webpack 目前无论在求职还是工作中，使用越来越普及。而想要学懂，学会Webpack更绝非易事。

<template>
    <div>
        <p>标题</p>
        <input type="text" v-model="title">
        <p>内容</p>
        <input type="text" v-model="content">
        <div class="btn" @click="add()">添加</div>
    </div>
</template>

<script>
    import store from '@/store'
    export default {
        name: "Add",
        store,
        data () {
            return {
                title: '',
                content: ''
            }
        },
        methods: {
            add () {
                store.commit('addItem',{
                    title: this.title,
                    content: this.content
                })
                this.title = ''
                this.content = ''
                this.$router.push('/home/list')
            }
        }
    }
</script>

<style scoped>

</style>

Add.vue

<template>
    <div>
        <router-view />
        <ul class="footer">
            <li class="icons"><router-link :to="{name: 'list'}">新闻列表</router-link></li>
            <li class="icons"><router-link :to="{name: 'user'}">个人中心</router-link></li>
        </ul>
    </div>

</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped lang="scss">
li {
    list-style: none;
}
.footer {
    position: fixed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    left: 0;
    bottom: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
.icons {
    font-size: 16px;
    flex: 1;
    text-align: center;
    border-top: 1px solid #42b983;
    a {
        color: #42b983;
        display: block;
        &.active {
            color: #fff;
            background: #42b983;
        }
    }
}
</style>

Home.vue

<template>
    <div>info</div>
</template>

<script>
    export default {
        name: "Info"
    }
</script>

<style scoped>

</style>

Info.vue

<template>
    <div>
        <ul>
            <li v-for="(item, index) in pageLists" :key="index">
                {{item.title}}-{{item.content}}
            </li>
        </ul>
    </div>
</template>

<script>
    import store from '@/store'
    export default {
        name: "List",
        store,
        computed: {
            pageLists () {
                return store.state.lists
            }
        }
    }
</script>

<style scoped>

</style>

List.vue

<template>
    <div>
        <form action="" v-if="!isReg">
            <div>用户名：</div>
            <input type="text" v-model="name">
            <div>密码：</div>
            <input type="password" v-model="password">
            <div>
                <button type="button" @click="login()">登录</button>
                <button type="button" @click="reg()">注册</button>
            </div>
        </form>
        <form action="" v-else>
            <div>用户名：</div>
            <input type="text" v-model="name">
            <div>密码：</div>
            <input type="password" v-model="password">
            <div>再次输入密码：</div>
            <input type="password" v-model="repeat">
            <div>
                <button type="button" @click="addUser()">确定</button>
                <button type="button" @click="cancel()">取消</button>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data () {
            return {
                isReg: false,
                name: '',
                password: '',
                repeat: ''
            }
        },
        methods: {
            login () {
                if (localStorage.getItem("name") === this.name && localStorage.getItem("password") === this.password){
                    this.name = ''
                    this.password = ''
                    this.$router.push('/home/list')
                }else{
                    alert('用户名密码不正确')
                }
            },
            reg () {
                this.isReg = true
            },
            cancel () {
                this.isReg = false
            },
            addUser () {
                if (this.password === this.repeat){
                    localStorage.setItem('name', this.name)
                    localStorage.setItem('password', this.password)
                    this.name = ''
                    this.password = ''
                    this.isReg = false
                }else{
                    alert('两次密码输入不一致')
                }
            }
        }
    }
</script>

<style scoped>

</style>

Login.vue

<template>
    <div>user</div>
</template>

<script>
    export default {
        name: "User"
    }
</script>

<style scoped>

</style>

User.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
</style>

App.vue

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/Login.vue'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'list',
          name: 'list',
          component: () => import(/* webpackChunkName: "list" */ './views/List.vue')
        },
        {
          path: 'user',
          name: 'user',
          component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
        },
      ]
    },
    {
      path: '/add',
      name: 'add',
      component: () => import(/* webpackChunkName: "add" */ './views/Add.vue')
    }
    // {
    //   path: '/about',
    //   name: 'about',
    //   // 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')
    // }
  ]
})

router.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    lists: []
  },
  mutations: {
    addItem (state, value) {
      state.lists.push(value)
    }
  },
  actions: {

  }
})

store.js

基础使用

认识Webpack
了解模块打包
多种Webpack安装方式及最佳方案
配置
命令行

核心知识

认识Loader
打包静态资源
plugins的概念及打包
SourceMap 应用与配置
WebpackDevServer
热模块更新
Babel 配置

进阶

Tree Shaking
Webpack中的分片打包
SplitChunksPlugin
懒加载和chunk
打包分析，Preloading, Prefetching
CSS 文件的代码分割
浏览器缓存
Shimming、环境变量使用方法

原理分析与扩展

自定义loader
自定义plugin
Webpack打包原理全分析
Webpack源码设计原理
全面性能优化

单页应用
多页应用
React
Vue
Typescript
ES6
PWA
EsLint
性能优化

使用过 Webpack ，做过
简单配置尝试

了解 JS 基础语法
使用过类似于 Webpack 这样的打包工具
对NodeJS有所理解

使用webpack

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

---

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774