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. 数据结构-链式队列-C++

    用链表搭建的栈与队列相对简单,队列的特点是先进先出,不啰嗦了,由于代码比较简单,相信光顾的人不会太多,下面直接贴代码. 头文件 #ifndef QUEUELI_H #define QUEUELI_H ...

  2. c++ (1) c++ 与c 的区别

    可以说c++ 语言在c基础上扩展了许多  在学习玩c语言之后  学习c++ 会发现容易一些  但是c++也有优越于c 的地方 c++ 与c 语言都属于本地编译型语言 ,直接编译成本地编译码,运行特别快 ...

  3. Golang的安装与环境配置(包括Go lint、Go imports、Go fmt)

    Golang安装 下载地址:https://studygolang.com/dl Go语言中文网 下载后安装,win10系统中会自动配置大部分设置,linux系统请参照网上教程 GO环境变量配置: $ ...

  4. 『Python基础练习题』day03

    # 1. 有变量name = " aleX leNb " 完成如下操作: # 移除 name 变量对应的值两边的空格,并输出处理结果 # 判断 name 变量是否以 "a ...

  5. WebClient 下载文件

    WebClient用法小结(转载)   如果只想从特定的URI请求文件,则使用WebClient,它是最简单的.NET类,它只用一两条命令执行基本操作,.NET FRAMEWORK目前支持以http: ...

  6. php中需要注意的函数(持续更新)

    explode 函数 $a = null; explode("#",$a); //不会报错会返回一个只包含空字符串的数组

  7. wepy框架 怎么在template模板中使用函数

    呵呵.介绍说是类似vue,用起来真累人,就想在模板中使用个函数都要查N久的文档才知道. 具体要怎么操作呢? 要先创建个wxs脚本文件,在里面定义函数或其它的,然后在页面或组件中引入这文件,就可以在模板 ...

  8. echarts的一点记录

    echart官网地址: https://www.echartsjs.com/index.html echarts实例地址:https://echarts.baidu.com/examples/ vue ...

  9. nginx 默认配置语法和日志的format

    nginx 默认配置 查看有nginx哪些默认配置文件,打开/etc/nginx/nginx.conf文件,查看尾行部分 会默认将/etc/nginx/conf.d/文件下其他以.conf结尾的配置文 ...

  10. Vue注意事项

    在使用Vue中的函数或自己定义的函数或指令的时候,Vue说明如下 在一些自己定义或系统定义的驼峰命名规则的时候,你需要到元素区域引用的使用中间的大写要改成小写在谭家 一条横杠如: 你在var=new ...