解决方案:使用externals引用第三方资源,防止element资源被打包到自己项目中,(总共修改3个页面index.html.webpack.base.conf.js.main.js) 1.修改index.html页面,再head中引入cdn. 2.修改webpack.base.conf.js文件.添加externals配置 externals: { vue: 'Vue', element: 'ElementUI', }, 3.删除main.js中的相应import from.因为如果不删除

目前一直使用vue去搭建项目,我个人习惯用Visual Studio Code编辑工具,所以下面的所有操作都是在这个编辑器中 在安装的时候,为了避免安装过程中出错,你最好安装了淘宝镜像(官网:https://npm.taobao.org/) npm install -g cnpm --registry=https://registry.npm.taobao.org 1,安装vue-cli cnpm install vue-cli -g        //    通过vue -V查看vue版本号

从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供一下方便. 一开始项目部署到线上后第一次访问首页的时间是7.8秒的样子,页面加载太慢了自己都接受不了何况用户. 主要是从一下几步来优化的: 1.vue路由的加载方式 import Home from '@/components/Index' 改为 const Index = resolve => r

问题背景:项目里面有用到背景图片,开发模式下正常,打包之后发现报404错误.查看发现是背景图片引用路径出错. 解决方法: .map { width: %; height: 397px; background: url(../../../static/backImgs/about5.png) no-repeat; background-size: % 397px; } build下由原来的相对路径  "./"  改为绝对路径  "/" 详细缘由: vue项目在打包之后

vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框架 2.构建项目框架 全局安装脚手架环境 npm install -g vue-cli 创建一个基于webpack模板项目my-project vue init webpack my-project 进入项目 cd my-project 安装依赖 npm install 启动项目 npm run d

1. nodejs安装及npm安装 下载地址:https://nodejs.org/en/download/ 选择windows Installer 下载完成后 运行node-v8.11.1-x64.msi 重启电脑后,node和npm都安装完成 通过 node -v 和 npm -v 命令验证是否按照成功 npm 安装太慢,可以切换成淘宝npm镜像cnpm,安装命令 npm install -g cnpm --registry=https://registry.npm.taobao.org c

.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是基于Vue.js的多页应用,由于是后端开发对不擅长Node.js开发并且希望使用传统的方式进行权限管控及生产发布,所以.Net Core Mvc 承担了所有的页面路由管控及页面级权限控制,Vue.js只是作为视图渲染及页面交互使用. 准备工作 Node安装及配置 安装方法参考地址 安装完成后cmd控

cnpm run build 文件过大,其中主要是vender.js有1.5M,代码部署到服务器,首次访问加载页面时比较慢,耗时6.5s左右,所以需要优化下. 1.Nginx开启gzip 找到nginx.config.关于gzip压缩代码: http { gzip on; #开启或关闭gzip on off gzip_disable "msie6"; #不使用gzip IE6 gzip_min_length 100k; #gzip压缩最小文件大小,超出进行压缩(自行调节) gzip_b

vue项目如何打包扔向服务器   当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上.   如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助.地址链接:vue-cli 如何打包上线   先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提

vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚至是图片资源:并且由于组件化,这些.vue文件之间还有错综复杂的关系.所以项目要被浏览器识别,我们就要使用webpack将它们打包成js文件以及相应的资源文件. 二.webpack的功能? 1.它可以把CSS,JS图片当做模块来处理 2.它可以把以上的这些

使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多) 第一种方法:使用命令行主题工具 使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍) 一.安装工具 1,安装主题工具 npm i element-theme -g 2,安装chalk主题,可以从 npm 安装或者从 GitH

我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找到图标管理.我的项目 2. 点紫色的这个创建自己的项目 3. 图中画红线的地方很重要 1).FontClass/Symbol前缀这个很重要,一定不要写成:el-icon-***这样的形式. 如果你写成这样的前缀,会和element-ui框架所带的图标(icon)冲突,导致你图标显示不出来 2).Fo

经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客. 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考: vue环境搭建 二.vue项目的打包 1.大家都知道使用npm run build进行打包,这个时候你直接打开dist/下的index.html,会发现文件可以打开,但是所有的js,css,img等路径有

vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外还有返回键监听的问题需要处理,否则按手机上的返回键不起作用,另外缓存问题,加载页跳转白屏问题也需要优化.======================安卓本地打包要用这个安卓的sdk项目,参考官网这个链接:http://ask.dcloud.net.cn/article/38安卓本地打包我没去搞,用的

vue项目的打包 更改config文件夹下的index.js里的assetsPublicPath路径    将 “/”  改为  “./” build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPubli

vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"></el-input> 解决方法需要在事件后面加上.native <el-input v-

vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-input v-model="name" placeholder="账号" @keyup.enter="doLogin"></el-input> 在执行的时候事件是定义在input外面的div上的,所有没有响应. 解决方法需要在事

参考:https://www.cnblogs.com/fubinbin/p/9938528.html 在vue脚手架安装完成之后,页面正常跳出vue刚安装完的界面 我们开始引入elementui 1.打开项目 src\main.js 添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 2.package.json文件中添加 "element-u

一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: assetsPublicPath: './' 2.解决css里面的路径问题,打开utils.js 添加红色框参数即可: publicPath: '../../'