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. linux 设置用户组共享文件

    1.首先建立一个名为workgroup的用户组,然后向用户组里面添加两名用户 tom 和liming,并为其设置密码 sudo groupadd workgroup [sudo] lcy 的密码: s ...

  2. windows下安装mysql-8.0.18-winx64

    1.下载安装包 安装包现在地址: https://dev.mysql.com/downloads/mysql/ 2.解压缩至安装目录 解压缩下载之后的zip,我这里使用的安装路径为: C:\Progr ...

  3. C#6.0的新语法特性

    https://www.cnblogs.com/dotnet261010/p/9147707.html https://www.cnblogs.com/wangdodo/p/7929050.html

  4. 命令行参数 && json 协议 && 自定义 error 类型

    命令行参数 在写代码的时候,在运行程序做一些初始化操作的时候,往往会通过命令行传参数到程序中,那么就会用到命令行参数 例如,指定程序运行的模式和级别: go run HTTPServer.go --m ...

  5. 关于Git无法提交 index.lock的解决办法

    今天提交代码时,在一次提交,莫名其妙没成功后,再次用git commit -a命令时,出现以下错误,无论是用git还是TortoiseGit都会出现以下这个问题.. $ git commit -a f ...

  6. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

  7. (三)react-native开发系列之开发环境集成

    先上图,由于是虚拟机中的ios虚拟器,所以有点卡 关于react-native的开发集成,主要包括以下几个方面 1.路由及页面跳转 2.数据请求的封装 3.状态的管理 4.公共方法和全局变量的封装 5 ...

  8. Eclipse上安装websphere

    Eclipse上安装websphere 参考:https://blog.csdn.net/qq_26264237/article/details/90107508 安装websphere插件 WebS ...

  9. Idea设置和查看

    1.查看激活码有效期 Help->Register

  10. Linux 之 软件安装

    单纯一个操作系统是没有办法满足我们的需求的,所以需要各种安装各种软件来满足我们日常工作.生活需求.一般情况下,Linux常用的安装方式有两种,以CentOS为例: 1.从源代码安装软件 将软件源代码编 ...