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. The required anti-forgery form field "__RequestVerificationToken" is not present.

    @using (Html.BeginForm()) { @Html.AntiForgeryToken() }

  2. js数据类型的判断方法

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

  3. FFMPEG在windows平台编译的详细过程,包括环境安装

    下面开始: 由于FFMpeg是基于Linux开发的开源项目,源代码和Windows下最常见的Visual Studio提供的C/C++编译器不兼容,因此它不能使用MSVC++编译.要想使用FFMpeg ...

  4. 问题解决了,可是为什么呢?could not find the main class.program will exitmain

    今天重新学习socket编写简单的在线聊天,简单功能实现的情况下,一时心血来潮便想要把这程序打成可执行的jar包,以便于在桌面直接双击运行. 参照自己之前写的那篇<>打好两个jar包以后却 ...

  5. USB设备驱动概述

    USB设备驱动 ·  )USB Hub:每个USBHost控制器都会自带一个USB Hub,被称为根(Root)Hub.这个根Hub可以接子(Sub)Hub,每个Hub上挂载USB设备.一般PC有8个 ...

  6. freemarker自定义标签(二十一)

    一,讲解一 1.自定义标签说明 宏变量存储模板片段可以被用作自定义指令macro 2.示例说明 <html> <head> <meta http-equiv=" ...

  7. Linux之批量挂载硬盘

    ############parted工具分区############### #!/bin/bash #shell脚本开头格式PATH=/bin:/sbin:/usr/bin:/usr/sbin #保证 ...

  8. 优化一个小时不出结果的SQL

    今天刚清闲点,在网上看些资料,这时,用户QQ上发来求助,说一个更新数据的SQL语句很慢,都一个小时了也不出结果,于是,了解下具体的情况,略施小计,5s出结果,下面是我分析该SQL时用到的执行计划,略去 ...

  9. CSS3 2D、3D转换

    2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE h ...

  10. Android中的Socket

    1. UDP (1)访问网络必须添加权限,访问网络必须添加权限,访问网络必须添加权限,重要的事情说三遍. (2)简述 UDP协议是面向报文的,简单地说,利用UDP访问网络的步骤就是"寄快递& ...