Vue-Cli + ElementUI 试水感受

CharTen
17,683 阅读6分钟

二话不说，先放效果图：


效果图

先介绍一下这个试水的小项目，就是上次搞那个express文件路由：express-dir-route的产物，用于展示和测试文件路由的一个界面。
功能十分简单，就是左侧是一个树形图，选中树形图可以在右侧查看路由的详细信息，并且给出测试接口和测试结果面板。

关于Vue-cli

Vue-cli是vue官方搞出来的，基于webpack的vue单文件构建工具。
一个大界面可以用无数个小小.vue文件组成，这个工具利用好，在切图前，先按照功能划分出一个个组件，每一个组件就是一个.vue文件，然后你会发现按照这个流程开发，写一个大界面就像搭积木一样，十分简单、而且易于维护，更适合多人开发。
然后我是用微软的vscode进行开发，在插件里面搜索vue，可以找到一个让.vue文件高亮的插件，安装后：


代码高亮的vue文件


高亮的代码可以让代码更好看一些。
关于vue以及vue-cli，这里推荐这篇入门：Vue2.0 新手完全填坑攻略——从环境搭建到发布

关于文件结构

功能十分简单，结构也十分明了，因此我分成了五个.vue文件：

  • 左侧树形菜单：leftSide.vue
  • 右侧详情界面：rightMain.vue
  • 路由详细信息：mainSection.vue
  • 测试接口界面：test.vue
  • 测试结果界面：result.vue

如图所示


文件结构


因为简单，所以也不用vue-route和vuex，状态管理简单的利用一个Vue实例的自定义事件来实现。即CTRL.js
然后入口则是main.js
主组件是App.vue
数据放在ct.js

当然这些都是不断实践不断增删之后的结果，一切都按照需要的来，怎么方便怎么简单就按照怎样来。

关于ElementUI

ElementUI的主页以及文档;
ElementUI是饿了么前端开源的一个基于Vue的前端框架，已经帮我们封装好了一系列功能性的组件，比如栅格系统、表格、表单、树形菜单、通知等。对于搞后台管理界面的项目，特别是不需要考虑兼容ie8、ie9以下的项目、ElementUI是一个不错的选择。
而且ElementUI的文档写得十分详尽，参照demo可以很快上手。
如第一张图所示，我这个界面总共用了ElementUI五个组件：

一些踩到的坑

  • 为什么我上面把我用到的组件都详细列出来呢？因为ElementUI是支持全部引入和按需引入的。这里我建议大家使用按需引入，也就是需要什么组件就引入什么：


    按需引入

    小贴士：
    如果你按照ElementUI官方文档去npm install babel-plugin-component -D，那么按需引入才是绿色注释里面的写法。不然的话如上图所示，一个个引入。
    按需引入的好处不言而喻，将会大大减少你的代码体积！而且跟上面一样，引入代码高亮包highlightjs和编译md包marked也用这类写法：


    按需引入


    特别是highlight.js，你直接import，它会将一堆乱七八糟你不需要的代码高亮样式、规则也打包进来。

  • 虽然是单文件开发，但是要记得，css的样式都是打包在一起的，换句话说，就是.vue文件的style标签里面样式都是全局的。建议大家使用less或者sass这些预编译语言去写样式，如果你还是坚持使用css请切记，不要随便在任何一个.vue文件内写诸如:

    <template>
  <h1>hello world</h1>
</template>
<style>
  h1{
      font-size:18px;
      color:#66ccff;
  }
</style>
<script>
  /**/
</script>

    这类看起来好像只作用于本文件里的h1标签的样式，实际上，你一打包，可能你这个样式就会覆盖掉别的文件里面的h1样式或者被覆盖掉。正确的做法是：

    <template>
  <h1 class="demo_h1">hello world</h1>
</template>
<style>
  .demo_h1{
      font-size:18px;
      color:#66ccff;
  }
</style>
<script>
  /**/
</script>

  • webpack打包方面，虽然vue-cli的webpack.config.js里面提供了这样的写法：


生产环境下打包


这个代码的意思是，当你使用webpack -p压缩打包的时候，让webpack启用下面这些配置进行打包。
不过在我使用中我却发现，这些似乎。。。不起作用？我也不知道原因，也不知道为什么，明明将devtool设置为'#source-map'了，但是打包完文件里面还是带着一堆base64码。。。
所以这里，如果你的项目是已经完成要打包了，建议你还是不辞辛苦，把if里面的配置写在module.exports里面，也就是：

module.exports={
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  /*省略一堆。。。*/
   devtool: '#source-map',
   plugins: [
       new ExtractTextPlugin("[name].css"),
       new webpack.optimize.CommonsChunkPlugin({ name: 'vue', minChunks: 2 }),
       new webpack.DefinePlugin({
           'process.env': {
               NODE_ENV: '"production"'
           }
       }),
       new webpack.optimize.UglifyJsPlugin({
           sourceMap: true,
           comments: false,
           compress: {
               warnings: false
           }
       }),
       new webpack.LoaderOptionsPlugin({
           minimize: true
       }),
   ]
}

我这样写之后，打包完项目大小从5m多的js文件压缩到了200多kb。。。问我那压掉的4m多是啥？我可以明确地告诉你，一堆恶心的base64码。
也希望能有人能告诉我，if里面的配置为啥不起作用？？？


打完包后的大小


如果还有什么有利于webpack压缩打包时减小代码体积的好招妙招，也请各路dalao赐教，谢谢。

  • vue-cli的打包是打包到一个文件中去的，连同css样式也会打包进去，这里我们要分开打包，所以webpack的配置可以这样弄：
    module.exports={
entry: {
  main: './src/main.js',
  vue: ['vue', 'vue-resource']
},
output: {
  path: path.resolve(__dirname, './doc/dist'),
  publicPath: '/doc/dist/',
  filename: '[name].js'
},
module: {
  rules: [{
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
                  loaders: {
                          // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                          // the "scss" and "sass" values for the lang attribute to the right configs here.
                          // other preprocessors should work out of the box, no loader config like this nessessary.
                          'css': ExtractTextPlugin.extract('css-loader'),
                          'scss': 'vue-style-loader!css-loader!sass-loader',
                          'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                  }
                  // other vue-loader options go here
          }
  }, {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
  }, {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' })
  }, {
          test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
          loader: 'file-loader'
  }, {
          test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
          loader: 'file-loader',
          query: {
                  name: '[name].[ext]?[hash]'
          }
  }]
},
plugins:[
  new ExtractTextPlugin("[name].css"),
  /*省略其他插件...*/
]
/*省略其他配置...*/
}
    利用插件extract-text-webpack-plugin对css进行打包，将其打包到一个css文件上，然后将vue和vue-resource这类摘出来独立打包。

写在最后

最后我发现基本上大篇幅在说Vue-cli，但是真的ElementUI没有啥可以讲的，就照着文档对着组件输入props或者调用method，很简单。
当然在使用这五个组件的过程中还是觉得有些缺陷，不过也不多：

  • 第一个是table组件，ElementUI的table组件虽说提供了一个固定行或者固定列的功能，但是在实际使用中，如果这个table组件的宽度是定死的还好，一旦你的需求里有table要自适应，那么在宽度的变动，比如说我这个项目的隐藏侧栏，右侧界面宽度发生变化，table底部的滑动条不停的出现消失，导致table在这宽度变化的过程中出现抖动，很影响体验。
  • 第二个是tree组件，虽然提供了一个filter的方法，即使是查看了它的issues之后，我还是很纳闷这个方法要怎么调用，希望能够在文档中给出一个demo。。。
avatar
文章
阅读
粉丝

友情链接：