包含:

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

element-vue的简单使用相关推荐

  1. 前端app调起摄像头 只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...

    本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴 有前端开发经验.但是没有使用过Vue的小伙伴 有过其他编程经验,对前端开发感兴趣的小伙伴 学习本教程之后你将会: 了解 ...

  2. 用php做一个简单的汇率,vue实现简单实时汇率计算功能

    最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...

  3. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  4. 基于vue-cli、elementUI的Vue超简单入门小例子

    基于vue-cli.elementUI的Vue超简单入门小例子 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...

  5. 01.vue的简单实例

    前段框架vue.js非常热门,每个vue应用都是通过创建vue函数创建新的vue实例开始,首先我们来创建一个简单的vue实例 多手动写写代码,你会发现真的很烦躁 <!DOCTYPE html&g ...

  6. Vue实现简单图表~满满的干货

    文章目录 前提:安装数据报表的插件 Vue实现简单图表的步骤 导入echarts 为ECharts准备一个具备大小(宽高)的Dom 基于准备好的dom,初始化echarts实例 指定图表的配置项和数据 ...

  7. 面包屑效果(element + vue)

    前言:最近在写一个基于element + vue 技术的pc端外卖管理系统项目,其中主内容头部区域用到了面包屑的效果,面包屑的文字内容和点击文字跳转到对应得组件页面,要根据路由信息动态生成.在这里呢, ...

  8. 从vue项目简单了解什么是SSR

    从vue项目简单了解什么是SSR SSR 从0到1开始 初始化项目 server.js SSR vue是单页应用,创建的项目不利于SEO爬虫,因为SEO爬虫是爬网页的源代码,而vue创建的项目是通过j ...

  9. springboot+vue搭建简单的聊天网站,从0到上线(腾讯云)

    springboot+vue搭建简单的聊天网站,从0到上线 整体架构简单梳理 云服务器 nginx的基础配置 springboot-eureka简单梳理 聊天功能实现的基础流程 ws的实现 整体架构简 ...

  10. vue实现简单计算商品价格

    jquery 组件Vue价格汇总计算表,本文实例为大家分享了vue实现简单计算商品价格的具体代码,供大家参考,具体内容如下 这篇文章主要为大家详细介绍了vue实现简单计算商品价格,文中示例代码介绍的非 ...

最新文章

  1. MATLAB中PI调节器设计,华中科技大学电气学院matlab选修课大作业pi控制器的设计...
  2. LeetCode: Jump Game II
  3. Imagine,is real crazy!
  4. Bootstrap table方法,Bootstrap table事件,配置
  5. matlab 小括号
  6. XML文档的基本操作
  7. php 安全基础 第八章 共享主机 安全模式
  8. SQOOP对分隔符支持情况的验证
  9. 论文笔记_S2D.49_2017-CVPR_从视频中无监督学习深度和运动估计(SFMLearner)
  10. windows下protobuf jar包的编译
  11. 动易自定义标签HTML输出,动易标签【ArticleList】
  12. 你最关心的马蜂窝事件舆论全景图在这里,用文本挖掘一挖到底
  13. 树莓派 无线网卡服务器,树莓派(Raspberry Pi)USB无线网卡配置方法
  14. linux运行360wifi,Linux(Ubuntu)下的无线网络卡上的小米和360wifi教程
  15. 简单控件学习——Lable/HyperLink
  16. 教你如何在虚拟机中安装镜像(图解)
  17. IDEA坑: log.info爆红和Mapper没有跳转箭头(插件安装)
  18. java dsa加密与解密_Java DSA 加密 | 解密
  19. 攻防世界MISC高手区Avatar
  20. 如何用python画雪人_能力橙少儿编程 - 学员作品 - Python作品-雪人(可变位置和大小)...

热门文章

  1. C#中使用SoundPlayer播放音频文件(wav文件)
  2. 对实体 useSSL 的引用必须以 ';' 分隔符结尾。
  3. 10 Redis 主从复制
  4. go 指针变量和普通变量的转化_7.8 C++指针变量的引用
  5. 高 NPS 背后的专业服务体系是如何炼成的?
  6. 转化与流量到底哪一个更重要?
  7. spring mvc-使用Servlet原生API作为参数
  8. 邬贺铨:区块链技术将确保物联网隐私和安全
  9. performSelector may cause a leak because its selector is unknown
  10. Java IO: 字符流的Buffered和Filter