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

作者：TG 日期： 2018-05-01 字数： 11315 阅读： 5127

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

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

技术栈

IDE工具：推荐webstorm

Github：vary-admin

项目结构

待定：vuex(状态管理器)

构建步骤：

创建项目
webpack配置
路由配置
启动项目

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的能力了。

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

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

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

关注”全栈技术杂货铺“

目录