您当前的位置：主页 > 技术探讨 >

vue 清坑完毕(一些小坑)

时间：2017-10-21 14:00 日记人：arlen.zhou

来拯救如此难看的界面

组件、双向绑定、路由、数据请求等基本特性都能用了，写到这里一个单页应用基本上成型了。但是，这几面也太 TM 难看了吧。自己写 UI 框架太费劲？那就上网找一个吧。本来想给大家介绍 Vux 的，因为他用的是微信的 WeUI 设计规范，对于开发微信小程序或者微信内的网页非常和谐，但由于写这篇文章的时候 Vux 还不支持 vue2.0，只能用别的框架了。命令行安装 ElementUI (此处某公司的人应该发红包了...)

cnpm install element-ui@next -S

然后在 main.js 引入并注册

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

保存，这时候程序报错

Uncaught Error: Module parse failed: /Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

官网文档又有坑了，安装教程也不跟我们说这一步，当我们都是高手了...
报错是由于我们引入了index.css这个 CSS 文件，但是 webpack 打包的时候无法识别并转换成 js，所以就需要配置才能读取 css 和字体文件，运行命令安装下面三个东西(如果之前安装过就不需要了)

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

在 webpack.config.js 中的 loaders 数组加入以下配置，记得该加逗号的地方加逗号!

{
    test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,
    loader: "style!css"
},
{
    test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,
    loader: "file"
}

修改完的 webpack.config.js 如下

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,
        loader: 'vue'
      },
      {
        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
          test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,
          loader: "style!css"
      },
      {
        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,
        loader: "file"
      },
      {
        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

给豆瓣的电影列表套个衣服(样式) :

<el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h2>
      </div>
      <div v-for="article in articles" class="text item">
        {{article.title}}
      </div>
</el-card>

打开浏览器,输入网址:

http://localhost:8080/second

列表比之前漂亮多了，你还可以参照 ElementUI 的文档使用更多组件样式

http://element.eleme.io/#/component/layout

编译

npm run build

又报错了...orz

ERROR in build.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6]

解决办法(21061019 showonne 提交 PR 已合并到主分支)

cnpm install babel-preset-es2015 --save-dev
cnpm install babel-preset-stage-0 --save-dev

然后在项目目录下创建一个.babelrc文件，内容如下:

{
    presets: ['es2015', 'stage-0']
 }

或者在webpack.config.js中这里

{
        test: /\\\\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }

加入 presets 配置，修改成下面酱紫:

{
        test: /\\\\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {presets: ['es2015', 'stage-0']
      }

再次执行 npm run build 就可以了，后来发现直接运行 webpack 命令也是可以打包的

webpack --color --progress

接着把 index.html 和整个 dist 目录丢到服务器就可以了。

如果你觉得这篇文章写得好，不需要打赏，你可以下载我朋友做的一个阅读工具，可以订阅公众号和简书、也可以看大神分享的优秀文章。

下载地址：[

上一篇：vue 豆瓣api 开放世界下一篇：vue打包三部曲