专栏首页达达前端(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 条评论
登录 后参与评论

相关文章

  • 一篇文章带你了解JavaScript中的面向 “对象”

    安装webpack,打包工具,安装webpack-dev-server,安装babel解析es6语法,初始化npm环境。

    达达前端
  • 【面试需要】掌握JavaScript中的this,call,apply的原理

    掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

    达达前端
  • Web前端-Vue.js必备框架(二)

    mustache插值和v-bind表达式。 vue生命周期,从创建,运行,到销毁,称为生命周期。

    达达前端
  • Spring Aop之Cglib实现原理详解

    Spring Aop实现对目标对象的代理,主要有两种方式:Jdk代理和Cglib代理。这两种代理的区别在于,Jdk代理与目标类都会实现同一个接口,并且在代理...

    田维常
  • 前端学习(38)~js学习(十五):原型对象

    上方代码中,我们的sayName方法是写在构造函数 Person 内部的,然后在两个实例中进行了调用。造成的结果是,构造函数每执行一次,就会给每个实例创建一个新...

    Vincent-yuan
  • 10 个 Vue 开发技巧,助力成为更好的工程师!

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

    逆锋起笔
  • JS面向对象的程序设计

    http://www.cnblogs.com/gaojun/p/3386552.html

    bear_fish
  • javascript基础练习:借用原型对象实现继承 & 排他思想 & 页面带参数自动跳转

    定义两个构造函数Student和Person,利用原型对象模拟上面类的继承关系。就是用对象模拟类,然后用call方法在函数内调用父类的方法即可。 注意call...

    Enterprise_
  • 腾讯地图点聚合开发-实现地图找房功能

    地图找房功能使用点聚合来实现的。官网示例如下:https://lbs.qq.com/javascript_v2/sample/overlay-markerclu...

    腾讯位置服务
  • vue项目小点(二)

    1.解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题

    生南星

扫码关注云+社区

领取腾讯云代金券