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

好了。把之前项目要用的拷过来就好了，✌️

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Merrys/p/8984104.html