vue+webpack+element-ui+git
- 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的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- 第五十三篇:Vue安装Element ui
好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- Vue.js + Element.ui 从搭建环境到打包部署
一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...
- Vue+webpack+Element 兼容问题总结
项目中用到了Vue.js和Elenment-UIVue官方文档中给出明确范围:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有 ...
- Vue结合Element UI实战
创建工程 1. 创建一个名为hello-vue的工程 vue init webpack hello-vue 2. 安装依赖 需要安装 vue-router.element-ui.sass-loader ...
随机推荐
- MySQL参数log_bin_trust_function_creators介绍
MySQL的有个参数log_bin_trust_function_creators,官方文档对这个参数的介绍.解释如下所示: log_bin_trust_function_creators Comma ...
- Davinci DM6446 Codec Engine双核通信环境的搭建
根据前几篇文章,一个DM6446的系统已经架构完成.但是有很多人都喜欢TI的机制,毕竟双核软件开发对很多工程师来说是非常麻烦的事情,既然TI提供开发套件和开发包,那么直接做OEM就可以了,底层的东西不 ...
- VS2005 添加onTimer定时器
SetTimer(1,300,NULL); void CchangeDisplayDlg::OnTimer(UINT_PTR nIDEvent) { // TODO: 在此添加消息处理程序代码和/或调 ...
- 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的文件出 ...
- Windows下的Memcache安装:
Windows下的Memcache安装:1. 下载memcache的windows稳定版,解压放某个盘下面,比如在c:\memcached2. 在终端(也即cmd命令界面)下输入 'c:\memcac ...
- javascript DOM document对象
document对象代表整个html文档 用来访问页面所有元素最复杂的一个dom对象 也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...
- Java中字符串的一些常见方法
1.Java中字符串的一些常见方法 /** * */ package com.you.model; /** * @author Administrator * @date 2014-02-24 */ ...
- ASP.net里不让浏览器缓存代码和Session使用注意事项
//不让浏览器缓存 context.Response.Buffer = true; context.Response.ExpiresAbsolute = ...
- Flex和Java通信报错
1.错误描述 11-30 18:15:52 ERROR [localhost-startStop-1] org.springframework.web.servlet.FrameworkServlet ...
- javaWeb之eclipse创建Servlet模板快捷键设置
没有模板创建Servlet 出现的是除了doPOST 和doGet方法 还有许多方法和一些注释,页面不够清晰 创建模板的步骤是: 1.点击window下的preference 选项 2在 表单框里填写 ...