（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