vue2.0-快速构建高性能的SPA(结合webpack, router, 组件)

前言

vue真的很强大, 用过它的人都说好
SPA(single page app, 即单页面应用)

该文介绍了spa项目的创建, 设置路由, 添加组件, 使用markdown编辑器, 使用webpack实现按需加载, 使用sass等几部分的内容, 内容较多, 慎入

正文

项目演示地址: 戳这里
项目代码地址: 戳这里

项目准备

• 初始化工程

npm install vue-cli -g  #install vue-cli
vue init webpack-sample my-vue-webpack-simple  # 创建基于模板webpack-sample的vue项目

• 安装依赖

# install dependencies
npm install

• 开启服务

# 开启本地服务器, 自带热加载, 默认地址localhost:8080
npm run dev

# 构建生产环境代码
npm run build

使用vue-router

• 安装

npm install vue-router --save

• 配置router
  ./src/main.js文件:

import Vue from 'vue'
import VueRouter from 'vue-router'

//components lists
import App from './App.vue';
import Home from './components/home.vue';
const Foo = { template: '
foo
' };
const Bar = { template: '
bar
' };

//创建子类构造器
const app = Vue.extend(App);

//使用模块化机制编程， 要调用 Vue.use(VueRouter)
Vue.use(VueRouter);

//定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];

//创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes
});

// 挂载到根实例
new app({
  router
}).$mount('#app');

• 设置路由模板./src/App.vue文件:

• 添加页面过渡css(vue2.0和1.0有些许差别, 详情看文档)

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-active {
    opacity: 0;
}

添加组件

• 改写home.vue

• 添加footer.vue

使用简单的markdown编辑器

示例地址

• 引入官网marked文件

import marked from '../../statics/js/[email protected]'

• 使用marked方法来计算输入的内容

• 给代码加高亮
  引入 highlight 的 js 和 css , 再在 marked 方法中配置下就OK了, 以下给出增加的代码片段, 插到相应位置上就可以了

• 更多的设置自行google
  源码中默认的配置参数:

marked.defaults = {
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  sanitizer: null,
  mangle: true,
  smartLists: false,
  silent: false,
  highlight: null,
  langPrefix: 'lang-',
  smartypants: false,
  headerPrefix: '',
  renderer: new Renderer,
  xhtml: false
};

vue webpack 按需加载的实现

我们知道在这之前，使用vue webpack 模板构建出的项目是将所有的js都编译到一个build.js文件中，旨在只加载一次资源，后续会有本地化app的效果，但当业务逻辑较多，组件较多时，这个文件就会很大，从而使首屏加载的时间very very long ~，第一次进入项目就要等上半分乃至几分钟，要是我的话肯定等不鸟→_→;

那么读到这里，有点经验的肯定会想到，能不能优化成类似requirejs的按需加载，首屏不需要的资源先不加载，到使用时再下载下来；官网的东西还是很强大的，虽然目前国内还没什么现成的例子，但通过官方文档，还是能进展一二的。废话不多说了，下面重点来了

• 更改webpack.config.js文件，使用webpack的chunk 查看CommonChunks插件

//...
//初始化webpack 自带的 chunk 插件
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common');
module.exports = {
  entry: './src/main.js',  //可引入多个入口文件，编译后的文件个数也会相应增多
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'dist/',
    filename: '[name].js',  //自动生成文件名
    chunkFilename: "chunts/[name]-[chunkhash:8].js"    //生成的子文件路劲/文件名
  },
  //...
  plugins: [ commonsPlugin ],
  //...
}
//...

• 修改入口文件src/main.js
  之前的路由写法：

import home from './components/home.vue';
import lists from './components/lists.vue';

const routes = [
  { path: '/', component: Index },
  { path: '/home', component: home },
  { path: '/lists', component: lists }
];

修改之后：点击查看官网-异步组件模块

const routes = [
  {
    path: '/',
    component: function (resolve) {
      require(['./components/index.vue'], resolve)
    }
  },
  {
    path: '/home',
    component: function (resolve) {
      require(['./components/home.vue'], resolve)
    }
  },
  {
    path: '/lists',
    component: function (resolve) {
      require(['./components/lists.vue'], resolve)
    }
  }
];

或者改写成这样：(是不是更加一目了然呢)

const routes = [
  { path: '/', component: view('index') },
  { path: '/home', component: view('home') },
  { path: '/lists', component: view('lists') }
];

//rebase url `./components/`
function view(name) {
    return function(resolve) {
        require(['./components/' + name + '.vue'], resolve);
    }
};

• 在index.html中替换依赖文件build.js

• 执行npm run build，编译后的文件结构如下

├── dist/                      # 编译后的目标文件夹
│   ├── common.js              # js分发文件
│   ├── main.js                # 压缩处理后的入口文件
│   └── chunts                 # 按需加载的子文件夹
│        ├── 0-xxxxxx.js
│        ├── 1-xxxxxx.js
│        ├── 2-xxxxxx.js
│        └── ...
├── ...

如图:

切换路由效果

点击查看官网-过渡效果的介绍

• 应用场景：同级路由间切换用fade动效，不同级路由间切换时，用slide-left和slide-right
• 修改src/App.vue文件

• 添加动效css

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-active {
    opacity: 0;
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
.slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active{
  transition: all .3s cubic-bezier(.55,0,.1,1);
}

效果图如下:

使用scss

• 安装依赖

npm install sass-loader node-sass --save-dev

• 配置webpack config

module.exports = {
  ...
  module: {
    rules: [
      ...,
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

• 在模块中引入scss文件

require("../statics/css/style.scss");

参考链接:https://github.com/jtangelder/sass-loader

问题总结

• build项目之后, 静态资源的如图片加载失败
  原因肯定是路径不对, 所以才找不到, 建议将webpack.config.js中的publicPath改为路径dist/, 若不行,再查看其它有关路径设置的地方