webpack.config.js

const {
resolve
} = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
const publicPath = ''
var ExtractTextPlugin=require('extract-text-webpack-plugin');//build使用
module.exports = (options = {}) => ({
entry: {
vendor: './src/vendor',
   index: ['babel-polyfill','./src/main.js']//ES6的语法兼容
},
output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: '[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
},
或者

  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: 'vue-style-loader!css-loader!sass-loader',
        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
      }
    }
  },//解决页面的scss文件不能解析的问题

      {
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
root: resolve(__dirname, 'src'),
attrs: ['img:src', 'link:href']
}
}]
},
// {
// test:/\.css$/,
// use:ExtractTextPlugin.extract({
// fallback:'style-loader',
// use:'css-loader'
// })
// },
// {
// test:/\.scss$/,
// loader:ExtractTextPlugin.extract({
// fallback:'style-loader',
// use:'css-loader!sass-loader'
// })
// },
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.scss$/,
exclude:/node_modules/,
use: ['style-loader', 'css-loader', 'postcss-loader','sass-loader']
},
{
test: /favicon\.png$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
exclude: /favicon\.png$/,
use: [{
loader: 'url-loader',
options: {
limit: 100000,
name:'img/[name].[ext]?[hash]'
}
}]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
// new ExtractTextPlugin({
// filename:'[name].css',
// disable:false,
// allChunks:true
// }),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
externals:{//抽离第三方库
/*"vue":"window.Vue",
"vue-router":"window.VueRouter"*/
},
resolve: {
alias: {
'~': resolve(__dirname, 'src')
}
},
devServer: {
host: '127.0.0.1',
port: 9001,
proxy: {
'/gonghui/': {
target: 'http://172.16.81.36',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/gonghui': 'gonghui'
}
}
},
historyApiFallback: {
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
}
},
devtool: options.dev ? '#eval-source-map' : '#source-map'
})

.babelrc

{
"presets": [
["es2015", { "modules": false }]
]
}

postcss.config.js

module.exports = {
plugins: [
require('autoprefixer')()
]
}

package.json

{
"name": "element-starter",
"description": "A Vue.js project",
"author": "yi.shyang@ele.me",
"private": true,
"scripts": {
"dev": "webpack-dev-server -d --inline --hot --env.dev",
 "build": "rimraf dist && webpack -p --progress --hide-modules","dele": "rm -rf node_modules"
},
"dependencies": {
"body-parser": "^1.17.2",
"element-ui": "^1.1.2",
"vue": "^2.3.4",
"vue-router": "^2.4.0"
},
"engines": {
"node": ">=6"
},
"devDependencies": {
"autoprefixer": "^6.6.0",
"babel-core": "^6.21.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.4.0",
   "babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.13.2",
"css-loader": "^0.27.0",
"eslint": "^3.12.2",
"eslint-config-enough": "^0.2.2",
"eslint-loader": "^1.6.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.24.1",
"node-sass": "^4.5.2",
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.1.8",
"webpack": "^2.2.0-rc.4",
"webpack-dev-server": "2.1.0-beta.12"
}
}

vue+webpack+element-ui+git的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  3. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  4. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  5. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  6. 第五十三篇:Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

  7. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  8. Vue.js + Element.ui 从搭建环境到打包部署

    一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...

  9. Vue+webpack+Element 兼容问题总结

    项目中用到了Vue.js和Elenment-UIVue官方文档中给出明确范围:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有 ...

  10. Vue结合Element UI实战

    创建工程 1. 创建一个名为hello-vue的工程 vue init webpack hello-vue 2. 安装依赖 需要安装 vue-router.element-ui.sass-loader ...

随机推荐

  1. 快速了解Druid——实时大数据分析软件

    Druid 是什么 Druid 单词来源于西方古罗马的神话人物,中文常常翻译成德鲁伊.  本问介绍的Druid 是一个分布式的支持实时分析的数据存储系统(Data Store).美国广告技术公司Met ...

  2. Java StringBuilder 和 StringBuffer 源码分析

    简介 StringBuilder与StringBuffer是两个常用的操作字符串的类.大家都知道,StringBuilder是线程不安全的,而StringBuffer是线程安全的.前者是JDK1.5加 ...

  3. R语言︱词典型情感分析文本操作技巧汇总(打标签、词典与数据匹配等)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:情感分析中对文本处理的数据的小技巧要 ...

  4. 通过grub-install命令把grub安装到u盘-总结

    通过grub-install命令把grub安装到u盘 ①准备一个u盘,容量不限,能有1MB都足够了. ②把u盘格式化(我把u盘格式化成FAT.fat32格式了,最后证明也是成功的).③开启linux系 ...

  5. 【javascript】jQuery判断用户右击事件

    jquery 判断用户是鼠标是右击还是左击, // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 $(document).mousedown(function(e) { if(3 ...

  6. eclipse报错

    1.eclipse报错具体如下 Error occurred during the build. Errors running builder 'JavaScript Validator' on pr ...

  7. freemarker自定义标签报错(四)

    freemarker自定义标签 1.错误描述 六月 05, 2014 11:31:35 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严 ...

  8. 微软依赖注入Unity

    Unity是一个依赖注入(Dependency Injection,DI)容器.DI的标准描述文章来自Martin Flower[0].作为一个快速的摘要,依赖注入容器就是一个用于构建高度松耦合的软件 ...

  9. The Eclipse executable launcher was unable to locate its companion launcher jar的解决方法

    大家都知道eclipse是免安装的,基本上解压就能用,但是笔者在解压后打开eclipse时遇到一个奇葩的问题,如题目所示. 在网上搜了半天,基本上都说的是:The Eclipse executable ...

  10. C# IEnumerable 和 IEnumerator接口浅析

    温故而知新,可以为师矣,有空经常复习一下基础知识是有必要的,并且能加深理解和记忆. Foreach常用于循环访问集合,对实现IEnumerable的接口的容器进行遍历,IEnumerable和IEnu ...