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; View Code全局配置：目前只支持配置組件尺寸
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);} ); View Code基本公用配置，按項目需求修改，導出。
在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);}); View Code看后臺接口，如果是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) {// 兩個請求現在都執行完成})); View Code近期兩個項目，一個用的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 basenamefor(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
好了。把之前項目要用的拷過來就好了，??
?
轉載于:https://www.cnblogs.com/Merrys/p/8984104.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的element-vue的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 样式调用
- 下一篇： nginx A/B 灰色发布