Vue+webpack 构建前端页面初探

作者: 雕兄L | 来源:发表于2019-04-25 10:02 被阅读0次

前言：本文适合后端同学快速了解基于vue的前端开发

Vue

学习成本:一周
Vue是一个js框架，承担和dom交互的职责，使开发人员在写js的时候，不用再去获取dom的对象并修改dom属性值,js写起来有点面向对象的感觉，对于后端研发来说相当好用。
官网:https://cn.vuejs.org

用Vue构建一个简单的计算器

简单实现一个可以加减乘除的计算器，并以这个实例介绍Vue基本用法

计算器目标效果图

<script>
  var app1 = new Vue({
    el: '#app-1',
    data: { //计算器属性
      v1: 0,
      action: '+',
      v2: 0,
      result: 0
    },
    methods: { //计算器方法
      calculate() {
        switch (this.action) {
          case '+':
            this.result = parseInt(this.v1) + parseInt(this.v2);
            break;
          case '-':
            this.result = this.v1 - this.v2;
            break;
          case '*':
            this.result = this.v1 * this.v2;
            break;
          case '/':
            this.result = this.v1 / this.v2;
            break;
        }
      }
    }
  });

</script>

以上的js代码，Vue对象里声明了计算器需要的属性和方法
Vue里面可以声明对象属性，方法，生命周期函数等，需要分别写在Vue对应的data、methods等属性中

el: 声明绑定哪个html标签
data: 声明属性的地方
methods: 声明方法的地方
生命周期函数有beforeCreate created destroyed等，比如页面初始化需要加载数据，则可以使用created

计算器的方法、属性在js里声明好了，接下来要做的就是把方法和属性分别和html标签绑定起来

<body>
<div id="app-1">
  <input type="text" v-model="v1">
  <select v-model="action">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="text" v-model="v2">
  <span>=</span>
  <input type="text" v-model="result">
  <button v-on:click="calculate">计算</button>
</div>
</body>

以上是html代码，把整段代码运行起来就能实现计算器效果。
关于如何绑定方法属性的说明:

v-model: 把input的value和vue的属性绑定起来，vue对象里的值和input标签里的值会相互同步更新
v-on: 把vue的methods里的方法和dom上的事件绑定起来, 简写用'@'表示，@click
v-bind: 把dom里的attribute和vue里的属性绑定起来,简写使用':'表示， :key, :total

使用vue实现交互式逻辑，js代码比较简洁，只需专注其逻辑实现，dom的操作由vue自动完成

Vue组件

组件就是封装一个可以复用的模块,比如实现一个分页的组件，其他页面可以复用.
下面通过伪码实现一个分页组件

<body>
<div id="app2">
  <!--html里使用分页组件-->
  <pagination :total="total" :current-page.sync="currentPage" :page-size="pageSize" @currentPageChange="pageChange()"></pagination>
</div>
</body>

<!--组件模板-->
<template id="pagination-template">
  <div>
    <button @click="pre()">上一页</button>
    <div v-for="cur in pageNumbers">
      <a @click="clickCur(cur)">${{cur}}</a>
    </div>
    <button @click="next()">下一页</button>
  </div>
</template>
<script>
//定义一个pagination
var pagination = new Vue({
    template: "#pagination-template",
    props: [total, currentPage, pageSize],//需要外部父组件给该组件传值时,在props里声明属性
    data: function () {//组件里的属性应该声明在方法里返回，组件复用时不会共享变量
      return {
        pageNumbers: [1,2,3,4,5,6,7,8]   //假定数组里是这些数字
      }
    },
    methods: {
      pre() {
        //...
      },
      next() {
        //....
      },
      clickCur(cur) {
        //修改currentPage的值
        //调用父组件绑定的currentPageChange事件
        this.$emit("currentPageChange");
      }
    }
  });


//父组件
//引用pagination组件
 var app2 = new Vue({
        el: "#app2",
        data: {
          currentPage: 0,
          pageSize: 20,
          total: 0
        },
        methods: {
          pageChange() {
            //刷新页面
          },
          listData() {
            //获取数据
          }
        },
        components: {
          'pagination': pagination //局部注册组件
        },
        created: function () { //页面初始化之前发起xmlHttpRequest加载业务数据
          this.listData();
        }
      });
 
</script>

用伪码实现一个分页组件，在app2中注册了一个名为pagination的组件，并在html中使用了<pagination></pagination>组件。

components是vue注册组件的属性
pagination组件的currentPage total pageSize 几个属性声明在了 props里，因为需要父组件向该组件传值，所以申明在props里才能接收到父组件传的值。（父组件通过v-bind的绑定attribute传值）
给组件传递currentPage的值的时候，:current-page.sync多了个sync后缀，表示子组件的值更新后，同步到父组件(正常情况下子组件内部的值更新后，不会同步更新父组件的值)
clickCur()里有一段代码 this.$emit("currentPageChange"), 这段代码意思是触发父组件上绑定的currentPageChange事件,Vue通过this.$emit("")这种方法通知父组件一些事件
v-for 意思是遍历一个集合，列表渲染指令

我们后端程序员写的页面一般不会太复杂，开发复用组件的情况比较少，更多的是使用别人开源出来的组件，了解组件间传值，属性同步，方法回调的实现还是很有必要。

单页面应用路由问题

学习成本:0.5天
单页面应用简单的说就是html里的页面一次加载出来，后续页面跳转都在页面内进行，除了数据需要从服务端加载，其他页面都是在页面内跳转，不再请求服务器，典型的url写法: /home/#/page1，页面间跳转使用#分割。详细介绍请自行查阅资料。

使用Vue会涉及到多个页面之间跳转如何在单页面内路由问题，即组件之间跳转问题，vue的路由使用Vue Router实现，参考https://router.vuejs.org/zh/。

组件之间状态同步问题

多个组件之间涉及状态同步，比如左边菜单组件和页面上方标签组件之间状态同步问题，实现类库参考https://vuex.vuejs.org/zh/

Vue相关生态

使用Vue之后，我们在项目中不再引入jquery的库，所以原来使用$.ajax不能再使用，XMLHttpRequest请求的类库推荐:
vue-resource: https://github.com/pagekit/vue-resource
axios: https://github.com/axios/axios
vue只是一个js框架，独木难支，实际开发中还是需要使用基于vue的开源前端框架才行,推荐饿了么开源的类库https://element.eleme.cn/#/zh-CN/component/installation, 这个库相当好用，基本项目中需要的组件实现基本都能找到
基于vue的后台模板推荐: https://github.com/lin-xin/vue-manage-system, 这个开源实现也不错，把整个前端架子都搭好了，只需删除里面多余的demo页面，并增加我们自己的新页面就行

NPM的使用

学习成本:无

Vue 可以直接在页面通过<script></script>标签引用，不过这种方式现在有点low了，就好比在java项目中，对依赖的jar包，还人工下载相应版本，然后copy到lib目录下一样。

使用NPM可以对依赖的包通过命令安装管理，npm依赖NodeJs环境，到官网下载一个NodeJs安装之后就可以使用npm命令。相关教程自行查阅。
常见命令:
npm install + packageName安装包
npm init初始化项目信息(创建一个package.json文件)

npm类似于java的maven，在项目根目录下创建一个pakage.json(类似pom.xml)文件，里面声明上项目信息和依赖哪些包，然后别人拿到项目之后，再npm install一下就能把所有依赖的包都下载到本地环境；另外当运行npm install+包名安装依赖时，也会自动在pakage.json里加入这个包的依赖信息。注意在这个json文件里不能加注释，会报错

{
  "name": "speech-test-html",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ajv": "^6.7.0",
    "element-ui": "^2.4.5",
    "file-saver": "^2.0.0",
    "less": "^3.9.0",
    "semantic-ui-icon": "^2.3.3",
    "vue": "^2.5.21"
  },
  "devDependencies": {
    "@types/file-saver": "^2.0.0",
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "less-loader": "^4.1.0",
    "semantic-ui-less": "^2.4.1",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

使用npm安装完一个包后，在js文件里可以通过require引用这个包，也可以用import引用
注意: require是nodejs的命令，import是ECMAScript 6的语法

webpack的使用

学习成本:1天
webpack也需要通过npm安装，这个工具的作用就是把项目里的各种html js css依赖文件编译到一个文件里，并进行压缩，缩小静态文件体积，可以减少浏览器加载html的时候发起的请求，加载速度要快一点。另外在使用第三方库的时候，可以按需引入相关组件
官网地址: https://www.webpackjs.com/guides/
webpack 其实就是一个集成了解析html css js 等文件的工具，也就是各种loader，比如css-loader vue-loader babel-loader,这些loader都需要使用npm 安装，然后需要在webpack.config.js里配置各种文件应该使用什么loader加载，怎么加载，还有webpack把项目资源都打包完的压缩文件放在哪个目录。这些配置一般都比较固定，没有特殊需求基本就是模板代码。

const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
    entry: __dirname + "/src/main.js",
    mode: "development",
    output: {
        path: __dirname + '/dist',
        filename: "bundle.js"
    },
    module: {
        rules: [
            {test: /\.vue$/, use: ['vue-loader']},
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime', "@babel/plugin-proposal-class-properties"]
                    }
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()

    ]

};

webpack-dev-server

使用webpack后必须要使用的一个热加载插件，实现html css js更改后浏览器可以实时刷新出内容，不用人工去点刷新
使用参考官网:https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server
这个服务会使用nodejs启动一个http服务，我们访问这个服务地址去查看编写的代码效果

vue-cli脚手架使用

学习成本：0.5小时
看到这里有没有感觉除了vue,其他要学习的东西也挺多，心里发慌！
不过不用怕，vue-cli就是一个类似于java里的springboot，使用vue-cli之后，可以直接初始化出一个vue开发环境出来，把以上关于webpack 和 webpack-dev-server的配置都搞好了，如果没有什么特殊需求，基本不用再去改配置！
参考官网:https://cli.vuejs.org/
https://github.com/lin-xin/vue-manage-system这个开源模板也是基于vue-cli的，可以参考下这个项目的使用就能get到这个脚手架怎么用

Vue+webpack 构建前端页面初探

Vue

用Vue构建一个简单的计算器

Vue组件

单页面应用路由问题

组件之间状态同步问题

Vue相关生态

NPM的使用

webpack的使用

webpack-dev-server

vue-cli脚手架使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读