专栏首页达达前端(23)打鸡儿教你Vue.js

(23)打鸡儿教你Vue.js

实例:

image.png

image.png

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

image.png

npm run build

image.png

image.png

image.png

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()
    ]
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简述几种序列化方式

    在Java应用中,所有对象的创建都是在内存中完成的,当应用需要保存对象到磁盘文件或通过网络发送给其他应用时,需要将对象信息转化成二进制字节流,这个从对象状态转化...

    搬砖俱乐部
  • [现场实录] VueConf 2019 尤雨溪演讲总结

    Chrome DevTools 有约 90 万的周活用户,React 相比有 160 万。Evan 推荐用 Chrome DevTools 来预测 Vue 的项...

    ConardLi
  • Web pack misc

    以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。这告诉 webpack 编译器(compile...

    Jerry Wang
  • Linux的cut,split,paste,grep,sed和awk命令总结

    Y大宽
  • ES6/ES2015

    Promise.all([p1,p2,p3]):把promise批量处理,必须确保所有的promise对象,都是resolve状态,都是成功的

    羊羽shine
  • mongodb shell 运行js脚本的四种方式

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wershest/article/details/72898...

    拓荒者
  • How to create extension project from standard CRM Fiori application

    Pre-Steps: You should know how to run CRM Fiori 1.0 applications in WebIDE first...

    Jerry Wang
  • Python爬虫神器pyppeteer,对 js 加密降维打击

    pyppeteer 是对无头浏览器 puppeteer的 Python 封装。无头浏览器广泛用于自动化测试,同时也是一种很好地爬虫思路。

    一墨编程学习
  • Spring 的 Bean 管理(XML 方式)

    这里不再做具体的演示说明,相关代码我已经上传 github,可以访问下面链接参考:

    希希里之海
  • Django打造大型企业官网(四)

    zhang_derek

扫码关注云+社区

领取腾讯云代金券