Vue2.0学习系列之项目上线的方法步骤(图文)

找了不少资料如何发布到服务器,然而还是没找到合适的可实际操作的文档.很多文档打着上线发布的标题,其实就是本地运行而已.其实vue2.0工程发布相当简单. 文章重点: 讲解vue工程配置部分的意义 如何打包为生产环境中的前端工程 如何打包发布到云端以及nginx服务器配置 一.vue工程配置部分的意义 首先我们先看下vue2.0整体工程目录结构 (非重点省略) - vueDemo //你的vue工程名 - build - build.js - check-version.js - utils.js

当你好不容易的做好了一个Vue项目,准备去上线的时候却发现不知道该怎么办时,或者遇到了一些问题,那么来看我这篇文章吧,你会有所收获的. 1:打包 项目上线必须要打包. 命令: npm run build 打包后会生成 一个 dist 文件夹,里边有 index.html文件 和 static文件夹 打包命令截图如下: 生成文件如下: 现在我们已经打包好了,那么现在让我们打开这个项目吧. 双击 index.html 打开 你会看到 一堆的报错,慌不?别着急接着看.通过上图我们可以看到报错的原因是资

熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下 接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一.我们先来创建中央事件总线,在src/assets/下创建一个eventB

用户在进行一些新的操作流程时,提供一些导航流程也是必要的.项目中采用的是iview 的对话框进行实现的. demo: <Modal v-if="modalOFF === 1"> <p>这里是对话框一</p> <button @click="modalOFF = 2"></button> </Modal> <Modal v-if="modalOFF === 2">

今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的main.js,还有网上的同道们的提醒: import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; import goods from './components/goods/goods';

由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器,原理很简单,不多说,直接上代码... <template> <div id="app"> <div class="select"> <div class="input_text"><input typ

昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错这里 下面是报错的代码 ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-c231dfa2!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/second.vue template syntax error <select v-model=&qu

在vue2.0中引用element-ui组件库 element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网: http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要

关于父子组件之间传递数据其实文档上都说得很明白. 但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件 1.parent.vue <template> <child :child-msg="msg" @ok="event"></child> </template> <script> import child from './child.vue'; export default { data(){