vue init webpack    项目名称

npm install axios                    //先安装!

npm install --save axios vue-axios   //然后!

npm install vuex --save              //安装vuex

npm i element-ui -S                        //安装vant,Ui框架,选择性安装

npm install babel-plugin-import -D            // 与element-ui是绑定安装关系

配置babelrc文件

{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
}
],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
],
"env": {
"test": {
"presets": [
"env",
"stage-2"
]
}
}
}

或者

  "plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]]],

如果报错

npm install babel-plugin-component --save-dev

npm run dev

后台(一)vue+element-ui (按需加载)的更多相关文章

  1. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  2. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

  3. vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  4. vue项目实现按需加载的3种方式

    vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: ' ...

  5. 35、element ui tab切换加载echarts不显示或显示不全问题解决:

    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card ...

  6. Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

    关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...

  7. vue router按需加载

    import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首 ...

  8. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  9. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

随机推荐

  1. WUSTOJ 1327: Lucky Numbers(Java)

    题目链接:1327: Lucky Numbers Description A lucky number is made by the following rules: Given a positive ...

  2. golang 管理 pidfile

    Pidfile 存储了进程的进程 id.一般情况下 pidfile 有以下几个作用: 其他进程可以读取 pidfile 获取运行进程的 pid(当然也可以通过其他命令 动态获取) 在启动进程前先检查 ...

  3. Linux判断SSD或HDD + 模拟SSD

    判断方法 方法一 判断cat /sys/block/*/queue/rotational的返回值(其中*为你的硬盘设备名称,例如sda等等),如果返回1则表示磁盘可旋转(HDD),返回0,则表示磁盘不 ...

  4. VMWare安装Ubuntu16.04

    一 概述 VMware Workstation 12的安装(略过,自行百度) Ubuntu16.04的安装 克隆出多个镜像 二 Ubuntu16.04的安装 1 准备 Window10 专业版(关闭H ...

  5. python多线程爬取斗图啦数据

    python多线程爬取斗图啦网的表情数据 使用到的技术点 requests请求库 re 正则表达式 pyquery解析库,python实现的jquery threading 线程 queue 队列 ' ...

  6. for_each使用方法详解

    for_each使用方法详解[转]   Abstract之前在(原創) 如何使用for_each() algorithm? (C/C++) (STL)曾經討論過for_each(),不過當時功力尚淺, ...

  7. MutationObserver

    一.MutationObserver Config childList: 添加.删除目标节点的子节点时会收到通知(子节点的后代节点添加或删除时不会收到通知) attribute: 修改目标节点属性时会 ...

  8. iOS testflight 使用说明

    一.告知开发者苹果手机的账户邮箱 1.通过任何形式告知即可 2.下载testflight 二.开发者发送激活邮件到测试者的账户邮箱 1.进入邮箱查看邮件点击 Accept invitation 进行下 ...

  9. [#Linux] CentOS 7 安装微信详细过程

    微信安装 微信安装过程如下: 1,下载最新版本tar.gz压缩包 wget https://github.com/geeeeeeeeek/electronic-wechat/releases/down ...

  10. Android笔记(十五) Android中的基本组件——单选框和复选框

    单选框和多选框通常用来在设置用户个人资料时候,选择性别.爱好等,不需要用户直接输入,直接在备选选项中选择,简单方便. 直接看代码: <?xml version="1.0" e ...