搭建一个简单的vue环境
1.安装vue-cli
在要项目的根目录中
npm install vue-cli -g
2.实例化
在要项目的根目录中
vue init webpack <项目名字>
会有很多选项,按需填写
因为要上传到git上,所以
3.下载包
进入项目文件夹
npm install
npm run dev
上传git
在文件夹中
git init
git status
git remote add origin https://gitee.com/fox9916/demo.git
//fatal: remote origin already exists.
//解决方法git remote remove origin
git pull --rebase origin master
git add . 添加目录下所有发生改变的文件
git commit -m '注释信息'
git push -u origin master 本地仓库代码提交至远程仓库
(git push -u origin master -f )
引入scss
npm install sass-loader node-sass --save-dev
引入element
npm i element-ui -S
- 如何局部覆盖element-ui的默认样式
在需要更改的组件里新增一个style标签【重点:不要加scoped】,然后直接获取class设置样式就可以咯,class自己去浏览器里右键审查元素可得到。
建议:在获取到的样式里加上能限制范围的父层选择器,不然就变成全局样式咯。
<style>
.ruzhu-mess .el-form-item__label{
font-size:16px!important;
}
.zhuanye-mess .el-form-item__label,.zhuanye-mess .color-t{
font-size:16px!important;
color:#606266;
}
</style>
<style lang="scss" scoped>
@import '../../../assets/scss/pages/organizationUserCenter1.scss';
</style>
引入pug
1.安装pug和jade依赖
#安装支持pug依赖
npm install pug pug-loader pug-filters -D
#安装支持jade依赖
npm install jade jade-loader -D
2.配置pug和jade
打开webpack.base.conf,在module的rules节点下添加如下配置:
{
test: /\.jade$/,
loader: "jade"
},
{
test: /\.pug$/,
loader: 'pug'
},
安装、使用vuex
1.安装
npm install vuex --save
2.配置
main.js :
import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store对象
state:{
show:false
}
})
在实例化 Vue对象时加入 store 对象 :
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。
3.在vue中使用
import { mapState } from "vuex";
computed: {
...mapState(["activeTab"])
},
导出excel表格数据
1.安装
npm install -S file-saver
npm install -S xlsx
npm install -D script-loader
2.放文件
在项目中创建一个文件夹(比如vendor,一般是在src目录下创建)
把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹内
3.在页面中使用
<template>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
<el-table:data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期"width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
handleDownload() {
this.downloadLoading = true
require.ensure([], () => {
const { export_json_to_excel } = require('@/vendor/Export2Excel')
const tHeader = ['日期', '姓名', '地址']
const filterVal = ['date', 'name', 'address']
const list = this.tableData
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '列表excel')
this.downloadLoading = false
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
4.注意问题
const { export_json_to_excel } = require('@/vendor/Export2Excel')这里的@/vendor/Export2Excel路径问题
关键是看build目录下的webpack.base.conf.js配置文件的alias
需要修改两个地方
- Export2Excel.js
require('script-loader!@/vendor/Blob');
- handleDownload()
const { export_json_to_excel } = require("@/vendor/Export2Excel");
数据可视化
npm i v-charts echarts -S
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。