element-vue的簡單使用

時間 2019-11-15

標籤 element vue 簡單使用简体版

原文原文鏈接

包含：css

vue-cli和@vue/cli element-ui mint-ui axios vuex(待) webpack簡單配置和多頁面配置，開發跨域html

npm安裝vue

npm i element-ui -S

按需引入webpack

npm install babel-plugin-component -D

完整組件列表和引入方式：ios

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

全局配置：目前只支持配置組件尺寸web

Vue.use(Element, { size: 'small' });

自定義主題（按需加載方式）vuex

npm i element-theme -g

npm i element-theme-chalk -D

et -i [能夠自定義變量文件]

以後會生成一個element-variables.scss文件，直接在這個文件上修改變量或是添加變量便可。vue-cli

編譯：npm

et

修改.babelrc element-ui

{
  "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 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

好了。把以前項目要用的拷過來就行了，✌️