vue2.0配置 https://github.com/wike933/vuebook
前言: 学习VUE几个月,看了很多例子和资料,vue虽然中文文档比较多,但是都是一些零散的教程,我这里打算写一本完整的VUE2.0的开发教程(因为时间有限,每天更新一小块,希望大家支持) 本人QQ :200569525 你想学什么,或者有什么疑问 可以联系我
正文:
第一步安装vue
我们一般使用vue-cli
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
安装依赖
$ cd my-project
$ npm install
$ npm run dev
这个虽然可以运行,但是根据现有开发环境有些地方需要配置(例如静态资源目录,后台数据代理)
进入到目录 config 打开index.js文件
找到 assetsSubDirectory: './',
这里配置成当前目录,意思时静态文件夹按照./为资源根目录
找到 index: path.resolve(__dirname, '../../dist/index.html'),
设置打包后的HTML路径
找到 assetsRoot: path.resolve(__dirname, '../../dist'),
设置打包后资源目录
找到 port:8080,
这里是设置开发环境的服务器断口(可以设置成3000)
找到 proxyTable
这个是设置代理的,我们经常后台和前端同时开发,后台自己起一个服务,如果不配置代理需要每次VUE修改就重启所以我们开发环境配置一个代理,这样开发环境就可以不需要编译,就能与后台数据传输。
(重点)
这里说明下,有的同学不理解 我们一般vue-cli开发是启动npm run dev
这个时候默认开启是 http://localhost:8080 或者http://localhost:3000, 这个时候如果假设我要和后台交互发送AJAX这个时候就跨域了(因为后台端口不是这2个,一个端口不能启动2个应用程序),如果不配置代理就无法请求,如果要请求只能 npm run bulid
编译打包,放到服务器(后台)的静态资源目录,这样修改就需要每次都编译,如果配置了代理 使用开发环境这样修改就及时更新( http://localhost:8080 这样搭建的服务器你vue修改 他会及时反应),开发效率就非常高
proxyTable: {'/api' :{target: 'http://127.0.0.1:3000', // 目标域名pathRewrite:{"^/api":""},secure:false}},
以上配置是 当你AJAX请求 假设请求/api/xxx的连接时,系统会自动代理到 ** 127.0.0.1:3000/xxx** 下(如果请求不是以/api开头那不进行重定向,访问的还是localhost+端口),这样代理就转发, 我们一般在main.js定义一个全局变量 xhr="/api"
然后ajax里面写 $.get(xhr+"/test/")
,在正式环境将xhr赋值为空字符串,这样开发环境使用代理, 非开发环境使用正式路径。
重点
这个地方很多人忘记改,很坑。会导致静态资源渲染时候出错。提醒大家一定要改 进入 build 打开 dev-server.js 找到
app.use(staticPath, express.static('./static'))
替换成
app.use(staticPath, express.static('./'))
这样上面配置的静态资源就是根目录开始,不然需要多个static目录
###下面讲解vue开发以及一些技巧
首当其中的是 main.js
import Vue from 'vue'
import App from './App' //引入根模块
import router from './router' //引入路由
import store from './store/' //引入全局数据管理
window.xhr="/api" 定义全局属性,用于AJAX前缀
如果需要造假数据 index.html 需要引入 <script src="http://mockjs.com/dist/mock.js"></script>
var Random = Mock.RandomRandom.ctitle()
var data = Mock.mock({'list|8': [{'id|+1': 1,"title":'@ctitle'}],});
Mock.mock("/notice.json", function(options) {console.log(options)return data})
这个时候你就可以 $.get('/notice.json/')
获得假数据,关于mock的用法详情请参考官网 http://mockjs.com/
注意
new Vue({el: '#app',router,store,template: '<App/>',components: { App }
})
以上代码必须在mock的逻辑之后,不然会出现请求404
//这里写 mock代码
/*所有mock代码全部写完,这个时候绑定vue插件
*/new Vue({el: '#app', //绑定到指定Id的元素下(可以不管)router, //这里是注册路由(这个写法等于 router:router)store, //这里是注册全局数据管理的注入 这个写法等于 {store:store}template: '<App/>', //这个定义魔板 默认就行components: { App } //这里是引入根组件 (默认是app.vue)这个写法等同于 components: { App:App}
###根组件 app.vue
<template><div id="app"><router-view></router-view> //这个定义路由模板</div>
</template><script>
export default {name: 'app' //这里定义组件名
}
</script>
<style>
</style>
注意
这里的template必须有一个根元素
<template><div id="app"><router-view></router-view> </div><div id="app2"><router-view></router-view> </div></template>
这种情况是不允许的
现在我们是单一<router-view>
假设我一个模板中需要多个组件路由我们可以这样
<div><router-view class="view one"></router-view><router-view class="view two" name="a"></router-view><router-view class="view three" name="b"></router-view></div>
路由文件./router/index.js
(详细的等会介绍)这样写
import Vue from 'vue'
import Router from 'vue-router'//引入路由
import Hello from '@/components/Hello' //引入组件
import Hello1 from '@/components/Hello1' //引入组件
import Hello2 from '@/components/Hello2' //引入组件
Vue.use(Router)export default new Router({routes: [{path: '/', //路由路径name: 'Hello', //路由别名components: { //路由包含的组件 default: Hello, //这个是默认的 对应 <router-view class="view one"></router-view>a: Hello1, //这个对应 <router-view class="view two" name="a"></router-view>b: Hello2 //这个对应 <router-view class="view two" name="b"></router-view>}}]
})
转载于:https://www.cnblogs.com/shatonghui/p/6846409.html
vue2.0配置 https://github.com/wike933/vuebook相关推荐
- Vue2.0配置mint-ui踩过的那些坑
Vue2.0配置mint-ui踩过的那些坑 最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错, ...
- vue2.0 配置 选项 属性 方法 事件 ——速查
全局配置 silent 设置日志与警告 optionMergeStrategies 合并策略 devtools 配置是否允许vue-devtools errorHandler 错误追踪 ...
- vue2.0配置代理 api 开发环境、生产环境
业务场景:只需内网调用接口,不需要ngix,所以生产环境没有跨域问题不用api代理,但是本地环境有跨域问题要做代理. 实现需求:本地环境有api,生产环境没有api 以下是实现方法: 1. confi ...
- Windows10+VS2017下GSL1.8_x86和sundials2.5.0配置及GITHUB项目schneider_et_al_2016_animaldiversity编译运行
一.GSL库下载 GSL简介及下载地址:GSL - GNU Scientific Library GSL FTP下载地址:GSL FTP GSL for Windows地址:Gsl for Windo ...
- Vue2.0 新手完全填坑攻略——从环境搭建到发布
什么是 Vue Vue 是一个前端框架,特点是 数据绑定 比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值 数据绑定 组件化 页面上小到一个按钮都可以是一个 ...
- 【Vue2.0】—github小案例(二十三)
[Vue2.0]-github小案例(二十三) <template><section class="jumbotron"><h3 class=&quo ...
- webpack+Vue2.0项目基础工程文件配置
随着Vue的流行,很多公司开始技术栈指向Vue,开始的时候用gulp+vue1.0做项目,一直到现在,webpack趋势也上来了,而且vue官网也是用webpack跟Vue结合去讲解实例,接下来大概说 ...
- 一步一步指引你在Windows7上配置编译使用Caffe(https://github.com/fengbingchun/Caffe_Test)
之前写过几篇关于Caffe源码在Windows764位上配置编译及使用过程,只是没有把整个工程放到网上,最近把整个工程整理清理了下,把它放到了GitHub上.下面对这个工程的使用作几点说明: 1. ...
- [vue] 怎么配置使vue2.0+支持TypeScript写法?
[vue] 怎么配置使vue2.0+支持TypeScript写法? 配置ts-loader,tsconfig增加类型扩展,让ts识别vue文件vue文件中script里面换成ts写法, 需要增加几个t ...
- 【Vue2.0】—Vue脚手架配置代理(二十二)
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一 方法二
最新文章
- webpack 占位符_通过示例学习Webpack:占位符图像模糊
- Web.config配置访问权限
- Docker容器启动自动化脚本(五)
- 002_SpringIOC
- jQuery bind事件练习及tab标签切换的实现
- vector 函数都有哪些??
- BAPI:KBPP_EXTERN_UPDATE_CO, TCODE:CJ30/CJ40 第二部分
- 小程序的网络请求封装
- 线粒体和叶绿体的基因组特点_叶绿体和线粒体基因组的组装研究
- LEF和GDS匹配问题
- ppt模板目录页如何排版设计?
- 有哪位仁兄可以告诉我,下载软件包的时候出现这种情况是怎么一回事呢?kali虚拟机,希望看见的前辈不吝赐教
- 爬虫3 requests基础2 代理 证书 重定向 响应时间
- 从QAM星座图判断噪声干扰
- ESP32 Arduino TM1638 数码管 按键 LED
- SEO分类:白帽SEO-黑帽SEO-灰帽SEO
- java识别整段地址
- 青蛙换位问题之递归回溯法
- java控制面板win10,Win10家庭版系统无法运行Java程序怎么办?
- 冒险岛登录服务器未响应,打开冒险岛,登陆角色后就黑屏了
热门文章
- 剑指offer答案python_剑指offer(python)(未完)
- android解析json数据 no value for message_Hive使用lateral view和explode处理嵌套json
- Unity脚本的生命周期
- PAT1104 Sum of Number Segments精度问题
- kalilinux装到u盘上的弊端_暗黑系统安装盘高达14G!kali linux在它面前顿然失色
- 虚拟服务器声卡,什么是虚拟声卡?虚拟声卡可以当声卡使用吗?
- 十三、Oracle学习笔记:decode函数、排序函数和高级分组函数
- 适配器模式之备忘录模式
- LayaAir 对象池 laya.utils.Pool
- 阶段3 2.Spring_08.面向切面编程 AOP_3 spring基于XML的AOP-编写必要的代码