首页 专题 H5案例 前端导航 UI框架

快速构建项目vary-admin:vue+vue-router+less+webpack 4+es6

作者:TG 日期: 2018-05-01 阅读: 722
Vue是一个轻量级的前端库,是当下最火热的前端MVVM框架之一。网上关于Vue的教程已经很多,所以这一篇文章并不是教你如何学习Vue,而是教你如何快速的构建一个Vue项目,同时给你提供一个可以直接使用的Vue项目。

要构建一个Vue项目,你可以使用vue-cli来快速构建,当然,我们并不使用脚手架,而是一步一步地构建项目。在这篇文章中,我会介绍基于vue + vue-router + less + webpack 4 + es6构建项目的核心配置和部分代码。

技术栈


IDE工具推荐webstorm

Githubvary-admin

项目结构



待定:vuex(状态管理器)

构建步骤:
  1. 创建项目
  2. webpack配置
  3. 路由配置
  4. 启动项目

1. 创建项目

首先,初始化项目:

$ mkdir vary-admin

$ npm init

跟着指示一路enter下去即可。

接着安装vue和vue-router:

$ cd vary-admin

$ npm i vue vue-router -S


2. webpack配置

关于webpack的入口(entry)、出口(output)、加载器(loaders)、插件(plugins)等概念,如你还不了解,可以到webpack官网熟悉一下。

项目中我们使用了vue模板,后缀是.vue,结构如下:

<template></template>   


<script>   

  export default {   

    name: "v-button"   

  }  

</script>   


<style scoped></style>

在上面的代码中,template里放置HTML代码,script放置javascript,style里放置CSS。

注:style的scoped属性表示局部样式,也就是说只在当前组件内起作用。

由于我们使用的是Less,所以需要改成这样:

<style lang="less"></style>


既然使用了vue模板和Less,我们就需要配置对应的 webpack配置来解析编译:

$ npm i vue-loader vue-style-loader less less-loader -D

安装完成后,可以配置(webpack.common.js)在module.rules中添加如下代码:

{   

  test: /\.vue$/,   

  loader: 'vue-loader',   

  options: {   

    loaders: {   

      css: 'vue-style-loader!css-loader',   

      less: 'vue-style-loader!css-loader!less-loader'   

    }   

  }   

}

通过上面的配置,我们就可以使用vue模板和Less。

另外,我们使用ES6来开发,而目前浏览器支持度还不高,所以也需要将其转换成es5,我们通过babel

$ npm i babel babel-runtime babel-loader babel-plugin-transform-runtime babel-plugin-syntax-dynamic-import babel-preset-es2015 babel-preset-stage-3 -D


创建一个.babelrc文件,这是babel的配置文件,添加如下代码:

{   

  "presets": ["es2015", "stage-3"],   

  "plugins": ["transform-runtime", "syntax-dynamic-import"],   

  "comments": false  

}

相信你留意到了syntax-dynamic-import,这是干嘛的呢?这是为了后续的按需加载路由。

同时,还需要在webpack配置(webpack.common.js)中配置,我们还使用了happypack,所以要安装:

$ npm i happypack -D

配置如下:

...   

const os = require('os');  

const HappyPack = require('happypack');  

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });   


module.exports = (env) => {   

  return {   

    ...   

    module: {   

      rules: [   

        ...   

        {   

          test: /\.js$/,   

          loader: 'happypack/loader?id=happybabel',   

          exclude: /node_modules/   

        }   

      ]   

    },   

    plugins: [   

      new HappyPack({   

        id: 'happybabel',   

        loaders: ['babel-loader'],   

        threadPool: happyThreadPool,   

        verbose: true   

      })   

      ...   

    ]   

  }   

}

注:happypack是通过多进程模型,来加速代码构建。

基于上面的配置,我们已经可以运行项目了,但是我们是单页面应用,所以还需要路由。

3. 路由配置

关于Vue的前端路由,我们使用vue-router

下面来看看三个文件:

1) src/app.js文件:

import Vue from 'vue';  

import App from '@/app.vue';  

import router from "@/router";   


new Vue({   

  el: '#root',   

  router,   

  render: h => {   

    return h(App)   

  }  

});

在上面的代码中,我们通过router绑定路由实例到Vue实例上。

注:上面使用的ES6的写法。

2) src/router/index.js文件:

import Vue from 'vue';  

import VueRouter from 'vue-router';  

import {routers} from './router';   


Vue.use(VueRouter);   


// 路由配置  

const RouterConfig = {   

  // mode: 'history',   

  routes: routers  

};   


// 创建路由实例

const router = new VueRouter(RouterConfig);   


// 路由跳转前,可以在这里判断权限

router.beforeEach((to, from, next) => {   

  next();  

});   


router.afterEach((to) => {  });   


export default router;


3) src/router/router.js文件:

import Main from '@/views/main';   


export const page404 = {   

  path: '404',   

  component: () => import('@/views/error/404')  

};   


export const mainRouter = [   

  {   

    path: '/',   

    component: Main,   

    redirect: '/home',   

    children: [   

      {   

        path: 'home', name: 'home_index', component: () => import('@/views/home/home')   

      }   

    ]   

  }  

];   


export const routers = [   

  page404,   

  ...mainRouter  

];

在这里,我们使用了按需加载路由,所以需要相应的编译:

{   

  "presets": ["es2015", "stage-3"],   

  "plugins": ["transform-runtime", "syntax-dynamic-import"],   

  "comments": false  

}

前面的syntax-dynamic-import就是为这里准备的。


4. 启动项目


通过webpack-dev-server来启动项目,搭建开发环境:

$ npm i webpack-dev-server -D

启动项目:

$ webpack-dev-server --config config/webpack.dev.js --open --watch


你可以通过命令行配置端口等,也可以在webpack中添加devServer来配置。


终极目标


搭建一个完善的后台管理系统。


总结


Vue是一个上手较为简单的前端开发库,但要完成一个完整的项目,就需要掌握多个依赖库,比如:路由、状态管理等。如果你需要使用ES6、Less这些,就需要借助webpack的能力了。


如遇到问题或有任何疑问,可以在下方评论区留言!



关注”全栈技术杂货铺“

全栈技术杂货铺