花了1天多的时间, 终于把这个框架搭建起来了。 好了, 不多说了, 直接进入主题了。
前提是安装了nodejs,至于怎么安装, 网上都有教程。 这里就不多说了, 这边使用的IDE是idea。
1.在E:/my-project(我的电脑上) 新建文件夹vueDemo,用idea直接打开, idea控制台会直接切换到对应的目录

2.直接在控制台npminit, 初始化这个项目(这个过程会让你输入一些信息, 一般都为默认) , 会自动生成package.json,有
些会同时生成package-lock.json, 不必管他
3.自己创建对应的目录文件, 这里除了node_modules外,

4.开始配置package.json
使用npm命令安装一些包, 需要安装的包有:
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-component": "^0.10.1",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.1.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.6.0",
"postcss-loader": "^2.0.8",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue-hot-reload-api": "^2.2.0",
"vue-loader": "^13.4.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"webpack": "^3.0.0-rc.2",
"webpack-dev-server": "^2.9.4"
同时, 需要安装element-ui vue,可使用命令npminstall --save element-ui vue
5.配置webpack.config.js文件
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',//值可以是字符串、 数组或对象
output: {
path: path.resolve(__dirname, './dist'),//Webpack结果存储
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
loader: "file-loader"
},
{
test: /\\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
devServer: {//webpack-dev-server配置
historyApiFallback: true,//不跳转
noInfo: true,
port: 8080,
inline: true//实时刷新
},
plugins: [
new HtmlWebpackPlugin({template: './index.html'})
],
performance: {
hints: false
},
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({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
6.配置.babelrc文件
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}

7.在src目录下创建一下文件及文件夹

到这里, 基本框架已经搭建好了, 期间有遇到过一个大坑,
编译时这边一直找不到该文件的报错, 可能是引入的element-ui版本比较高, 主题样式改成别的了, 后面是去之前引进的
element-ui包找到了theme-default这个文件, 复制到这边对应的目录下才解决问题。
该项目github地址:https://github.com/zhangpj10/pjVueTest

基于webpack搭建的vue+element-ui框架的更多相关文章

  1. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  2. 基于Vue的Ui框架

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...

  3. Element UI 框架搭建

    Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...

  4. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  5. element-ui iview-admin 都是基于vue的ui框架

    element-ui iview-admin 都是基于vue的ui框架

  6. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  7. 5款vue前端UI框架

    Vue.js是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue ...

  8. 很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  9. 2018年九个很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

随机推荐

  1. ElasticSearch入门(2) —— 基础概念

    在Elasticsearch中,文档归属于一种类型(type),而这些类型存在于索引(index)中,我们可以画一些简单的对比图来类比传统关系型数据库: Relational DB -> Dat ...

  2. HIVE---基于Hadoop的数据仓库工具讲解

    Hadoop: Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用来开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop实现了一个分布式文件系统(Hadoop Dist ...

  3. FPGA在电平接口领域的应用

    电子技术的发展,产生了各种各样的电平接口. TTL电平: TTL电平信号之所以被广泛使用,原因是因为:通常我们采用二进制来表示数据.而且规定,+5V等价于逻辑"1",0V等价于逻辑 ...

  4. Python面试题之生成器/迭代器

    1.为什么要有生成器? 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个 ...

  5. (原)怎样解决python dataframe loc,iloc循环处理速度很慢的问题

    怎样解决python dataframe loc,iloc循环处理速度很慢的问题 1.问题说明 最近用DataFrame做大数据 处理,发现处理速度特别慢,追究原因,发现是循环处理时,loc,iloc ...

  6. 如何判断Linux 是32位还是64位

    .运行 'uname -m' 命令 上面的命令内涵太多了,可以用这个参数直指人心:'uname -m' . 例如,在我的系统里,它显示了以下信息: $ uname -m i686

  7. 项目常见函数封装,基于Jquery

    /// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mC ...

  8. NPOI导出excel(带图片)

    近期项目中用到Excel导出功能,之前都是用普通的office组件导出的方法,今天尝试用下NPOI,故作此文以备日后查阅. 1.NPOI官网http://npoi.codeplex.com/,下载最新 ...

  9. DataGrid 得到DataGridRow 和DataGridColumn

    /* ---------------------------------------------------------- 文件名称:DataGridPlus.cs 作者:秦建辉 MSN:splash ...

  10. 【爬虫入门01】我第一只由Reuests和BeautifulSoup4供养的Spider

    [爬虫入门01]我第一只由Reuests和BeautifulSoup4供养的Spider 广东职业技术学院  欧浩源 1.引言  网络爬虫可以完成传统搜索引擎不能做的事情,利用爬虫程序在网络上取得数据 ...