element-vue的简单使用
包含：
vue-cli和@vue/cli element-ui mint-ui axios vuex(待) webpack简单配置和多页面配置，开发跨域
npm安装
npm i element-ui -S
按需引入
npm install babel-plugin-component -D
完整组件列表和引入方式：
import Vue from 'vue'; import { Pagination, Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Select, Option, OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker, Popover, Tooltip, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, Alert, Slider, Icon, Row, Col, Upload, Progress, Badge, Card, Rate, Steps, Step, Carousel, CarouselItem, Collapse, CollapseItem, Cascader, ColorPicker, Transfer, Container, Header, Aside, Main, Footer, Loading, MessageBox, Message, Notification } from 'element-ui'; Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use(Tabs); Vue.use(TabPane); Vue.use(Tag); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use(Cascader); Vue.use(ColorPicker); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer); Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message;
全局配置：目前只支持配置组件尺寸
Vue.use(Element, { size: 'small' });
自定义主题（按需加载方式）
npm i element-theme -g
npm i element-theme-chalk -D
et -i [可以自定义变量文件]
之后会生成一个element-variables.scss文件，直接在这个文件上修改变量或是添加变量即可。
编译：
et
修改.babelrc
{ "plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "~theme" } ]]] }
自此已经搭建好vue与element-ui的工作环境。
剥离配置文件
在模板index.html中加入
<script> window.g = { ROOTURL: "XXXXXXXXXX" } </script>
在src/下新建config/ip.js
const G = window.g;
export const ROOTURL = G.ROOTURL;
在main.js中引入使用
import {ROOTURL} from './config/ip'
Vue.prototype.ROOTURL = ROOTURL;
切换环境的时候直接在模板index.html中修改。
打包时
productionSourceMap：false
xhtml: true //html-webpack-plugin 实例中添加 添加xhtml头
removeAttributeQuotes：false //html-nimifier 实例中添加 保留引号
keepClosingSlash: true //html-nimifier 实例中添加 保留闭合
collapseWhitespace: false // 取消document tree 压缩
这里是按现在项目需要
- 不需要map
- 需要保留引号
- 需要保留单标签闭合
- 方便修改配置
因为总项目中已经有一个index.html文件，不能在打包的时候也命名成index，所以修改config/index.js中
build:{
index: path.resolve(__dirname, '../dist/XXXX.html'),
assetsSubDirectory: 'staticXXXX',
}
其他配置在config和build中都能修改。
添加axios
npm install axios --save-dev
在src/下新建config/request.js
import axios from "axios";
const Axios = axios.create({
baseURL: "",
timeout: 8000,
responseType: "json",
headers: {
"Content-Type": "application/json;charset=utf-8"
},
timeout: 1000
});
Axios.interceptors.request.use( // 请求拦截器
config => {
// 在发送请求之前做某件事
......
return config;
},
error => {
console.log(error)
return Promise.reject(error);
}
);
Axios.interceptors.response.use( // 响应拦截器
response => {
......
return response;
},
error => {
if (error.response) {
......
} else {
console.log('Error', error.message);
}
return Promise.reject(error);
}
);
基本公用配置，按项目需求修改，导出。
在main.js中引入使用
import {Axios} from './config/request'
Vue.prototype.Axios= Axios;
个人使用方式
axios.post(url, params) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); axios.get(url, {params:params}) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });ole.log(error); }); axios.put(url, params) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
看后台接口，如果是URL直接拼接，那就引入qs等给他拼^>^。
执行多个并发请求
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 }));
近期两个项目，一个用的vue-resource，一个用的axios。不过复杂一些的异步请求都要配合asnyc/await使用(感觉自己都“优雅”了呢)。
用的比较简单，看文档足以。
element-ui适合在pc端，而移动端也有一套相应的ui，mint-ui，使用方法和element-ui相同。有新的移动项目的话，可以跟同事商量一下使用。
噔噔噔噔~~~~~~~~~
webApp里用mint-ui了，跟以往项目不同的是这次需要采用多页面。
utils.js
获取匹配的多入口，作为module.exports.entry的参数
/**
*
* @param {String} globPath 页面文件所在的文件夹名字，一般为pages或者views
*/
exports.getEntry=function(globPath){ var files=glob.sync(globPath)// 获取所有的页面路径 var entries={} var basename for(var i=0;i<files.length;i++){ basename=path.basename(files[i],path.extname(files[i])) entries[basename]=files[i] } return entries }
注释掉config/index.js中的build.index，修改webpack.prod.config 和webpack.dev.config中html打包，
const pages = utils.getEntry('./src/pages/**/*.js')
const pageNames = Object.keys(pages)
pageNames.forEach(function (pathname) {
var dirname = pages[pathname].split('.js')[0]
var conf = {
filename: pathname + '.html',
template: dirname + '.html',
inject: true,
xhtml: true, // 打包
minify: { //打包
removeComments: true,
collapseWhitespace: false,
removeAttributeQuotes: false,
keepClosingSlash: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', pathname] // dev只需要 pathname
}
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
})
打包配置完毕；
然后修改webpack.dev.conf.js
historyApiFallback: { rewrites: [ {from: /url1/, to: config.dev.assetsPublicPath + 'src/pages/url1/url1.html'}, {from: /url2/, to: config.dev.assetsPublicPath + 'src/pages/url2/url2.html'}, {from: /url3/, to: config.dev.assetsPublicPath + 'src/pages/url3/url3.html'}, ], },
localhost:8080/url1.html就能边开发边预览了。
这时候剥离的配置，写在根目录下的static中。
开发版本跨域 https://www.cnblogs.com/Merrys/p/9699549.html
公司给我换了mac一体机，开开心心的换电脑装软件跑项目，全挂了，各种捣鼓都不行，就干脆把vue-cli换成@vue/cli了，还好，不绝人路，哈哈哈哈哈哈哈
附上文档地址：@vue/cli
记录几个注意点：
1.要先卸载vue-cli；
2.修改或是新增一些webpack的配置，新建一个vue.config.js写；
3.全局注入变量----新建.env
好了。把之前项目要用的拷过来就好了，✌️
