1. webpack.config.js
  2.  
  3. const {
  4. resolve
  5. } = require('path')
  6. const webpack = require('webpack')
  7. const HtmlWebpackPlugin = require('html-webpack-plugin')
  8. const url = require('url')
  9. const publicPath = ''
  10. var ExtractTextPlugin=require('extract-text-webpack-plugin');//build使用
  11. module.exports = (options = {}) => ({
  12. entry: {
  13. vendor: './src/vendor',
  14.    index: ['babel-polyfill','./src/main.js']//ES6的语法兼容
  15. },
  16. output: {
  17. path: resolve(__dirname, 'dist'),
  18. filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
  19. chunkFilename: '[id].js?[chunkhash]',
  20. publicPath: options.dev ? '/assets/' : publicPath
  21. },
  22. module: {
  23. rules: [{
  24. test: /\.vue$/,
  25. use: ['vue-loader']
  26. },
    或者

  {
    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文件不能解析的问题

  1. {
  2. test: /\.js$/,
  3. use: ['babel-loader'],
  4. exclude: /node_modules/
  5. },
  6. {
  7. test: /\.html$/,
  8. use: [{
  9. loader: 'html-loader',
  10. options: {
  11. root: resolve(__dirname, 'src'),
  12. attrs: ['img:src', 'link:href']
  13. }
  14. }]
  15. },
  16. // {
  17. // test:/\.css$/,
  18. // use:ExtractTextPlugin.extract({
  19. // fallback:'style-loader',
  20. // use:'css-loader'
  21. // })
  22. // },
  23. // {
  24. // test:/\.scss$/,
  25. // loader:ExtractTextPlugin.extract({
  26. // fallback:'style-loader',
  27. // use:'css-loader!sass-loader'
  28. // })
  29. // },
  30. {
  31. test: /\.css$/,
  32. use: ['style-loader', 'css-loader', 'postcss-loader']
  33. },
  34. {
  35. test: /\.scss$/,
  36. exclude:/node_modules/,
  37. use: ['style-loader', 'css-loader', 'postcss-loader','sass-loader']
  38. },
  39. {
  40. test: /favicon\.png$/,
  41. use: [{
  42. loader: 'file-loader',
  43. options: {
  44. name: '[name].[ext]?[hash]'
  45. }
  46. }]
  47. },
  48. {
  49. test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
  50. exclude: /favicon\.png$/,
  51. use: [{
  52. loader: 'url-loader',
  53. options: {
  54. limit: 100000,
  55. name:'img/[name].[ext]?[hash]'
  56. }
  57. }]
  58. }
  59. ]
  60. },
  61. plugins: [
  62. new webpack.optimize.CommonsChunkPlugin({
  63. names: ['vendor', 'manifest']
  64. }),
  65. // new ExtractTextPlugin({
  66. // filename:'[name].css',
  67. // disable:false,
  68. // allChunks:true
  69. // }),
  70. new HtmlWebpackPlugin({
  71. template: 'src/index.html'
  72. })
  73. ],
  74. externals:{//抽离第三方库
  75. /*"vue":"window.Vue",
  76. "vue-router":"window.VueRouter"*/
  77. },
  78. resolve: {
  79. alias: {
  80. '~': resolve(__dirname, 'src')
  81. }
  82. },
  83. devServer: {
  84. host: '127.0.0.1',
  85. port: 9001,
  86. proxy: {
  87. '/gonghui/': {
  88. target: 'http://172.16.81.36',
  89. secure: false,
  90. changeOrigin: true,
  91. pathRewrite: {
  92. '^/gonghui': 'gonghui'
  93. }
  94. }
  95. },
  96. historyApiFallback: {
  97. index: url.parse(options.dev ? '/assets/' : publicPath).pathname
  98. }
  99. },
  100. devtool: options.dev ? '#eval-source-map' : '#source-map'
  101. })

.babelrc

  1. {
  2. "presets": [
  3. ["es2015", { "modules": false }]
  4. ]
  5. }

postcss.config.js

  1. module.exports = {
  2. plugins: [
  3. require('autoprefixer')()
  4. ]
  5. }

package.json

  1. {
  2. "name": "element-starter",
  3. "description": "A Vue.js project",
  4. "author": "yi.shyang@ele.me",
  5. "private": true,
  6. "scripts": {
  7. "dev": "webpack-dev-server -d --inline --hot --env.dev",
  8.  "build": "rimraf dist && webpack -p --progress --hide-modules""dele": "rm -rf node_modules"
  9. },
  10. "dependencies": {
  11. "body-parser": "^1.17.2",
  12. "element-ui": "^1.1.2",
  13. "vue": "^2.3.4",
  14. "vue-router": "^2.4.0"
  15. },
  16. "engines": {
  17. "node": ">=6"
  18. },
  19. "devDependencies": {
  20. "autoprefixer": "^6.6.0",
  21. "babel-core": "^6.21.0",
  22. "babel-eslint": "^7.1.1",
  23. "babel-loader": "^6.4.0",
       "babel-polyfill": "^6.26.0",
  24. "babel-preset-es2015": "^6.13.2",
  25. "css-loader": "^0.27.0",
  26. "eslint": "^3.12.2",
  27. "eslint-config-enough": "^0.2.2",
  28. "eslint-loader": "^1.6.3",
  29. "extract-text-webpack-plugin": "^2.1.0",
  30. "file-loader": "^0.10.1",
  31. "html-loader": "^0.4.5",
  32. "html-webpack-plugin": "^2.24.1",
  33. "node-sass": "^4.5.2",
  34. "postcss-loader": "^1.3.3",
  35. "rimraf": "^2.5.4",
  36. "sass-loader": "^6.0.3",
  37. "style-loader": "^0.13.2",
  38. "url-loader": "^0.5.8",
  39. "vue-loader": "^11.1.4",
  40. "vue-template-compiler": "^2.1.8",
  41. "webpack": "^2.2.0-rc.4",
  42. "webpack-dev-server": "2.1.0-beta.12"
  43. }
  44. }

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. MySQL参数log_bin_trust_function_creators介绍

    MySQL的有个参数log_bin_trust_function_creators,官方文档对这个参数的介绍.解释如下所示: log_bin_trust_function_creators Comma ...

  2. Davinci DM6446 Codec Engine双核通信环境的搭建

    根据前几篇文章,一个DM6446的系统已经架构完成.但是有很多人都喜欢TI的机制,毕竟双核软件开发对很多工程师来说是非常麻烦的事情,既然TI提供开发套件和开发包,那么直接做OEM就可以了,底层的东西不 ...

  3. VS2005 添加onTimer定时器

    SetTimer(1,300,NULL); void CchangeDisplayDlg::OnTimer(UINT_PTR nIDEvent) { // TODO: 在此添加消息处理程序代码和/或调 ...

  4. python3.4 UnicodeDecodeError: 'gbk' codec can't decode byte 0xff in position

    python3.4 UnicodeDecodeError: 'gbk' codec can't decode byte 0xff in position 实用python的时候 打开一个csv的文件出 ...

  5. Windows下的Memcache安装:

    Windows下的Memcache安装:1. 下载memcache的windows稳定版,解压放某个盘下面,比如在c:\memcached2. 在终端(也即cmd命令界面)下输入 'c:\memcac ...

  6. javascript DOM document对象

    document对象代表整个html文档 用来访问页面所有元素最复杂的一个dom对象 也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...

  7. Java中字符串的一些常见方法

    1.Java中字符串的一些常见方法 /** * */ package com.you.model; /** * @author Administrator * @date 2014-02-24 */ ...

  8. ASP.net里不让浏览器缓存代码和Session使用注意事项

    //不让浏览器缓存             context.Response.Buffer = true;             context.Response.ExpiresAbsolute = ...

  9. Flex和Java通信报错

    1.错误描述 11-30 18:15:52 ERROR [localhost-startStop-1] org.springframework.web.servlet.FrameworkServlet ...

  10. javaWeb之eclipse创建Servlet模板快捷键设置

    没有模板创建Servlet 出现的是除了doPOST 和doGet方法 还有许多方法和一些注释,页面不够清晰 创建模板的步骤是: 1.点击window下的preference 选项 2在 表单框里填写 ...