vue+webpack开发(一)
一开始接触这个vue+webpack的时候,实在是摸不着头脑,根本无从下手。
但是经过这两天的研究,其实你会发现vue其实并不难,难度都在webpack你对webpack的理解。
webpack顾名思义就是专为web前端打造的打包工具。
一般基本情况下,它会根据你提供的js入口文件,按照里面import(或者require)的内容,生成一个打包好的一个js文件,跟着它会按照你提供的模板生成一个html文件(主要是帮你引入打包好的那个js文件)。
接着你想要用vue来开发,你就尽管在入口文件import vue的库就可以了。
配置好通用的webpack.config后,我们来了解下在webpack项目下怎么使用vue吧:
官方vue上的例子都是正常的html写法:
<script src="vue.js"></script>
而到了webpack项目,我们引入库的方式就是在入口js文件中引入了:
一般vue项目,至少用到vue、vue-router、vue-resource(现在官方推荐用axios)
import Vue from 'vue';
import Router from 'vue-router';
import VueResource from 'vue-resource';
当然我们得先安装好这些前端库:
npm i vue vue-resource vue-router --save //前端要到框架都存在dependencies上
一般来说,我们入口文件不会做过多的开发,所以这里就只创建一个Vue实例,然后把根组件引入渲染:
// 入口js文件
import Vue from 'vue';
import Router from 'vue-router';
import VueResource from 'vue-resource' ;
//组件
import App from '@/views/App';
import login from '@/components/login'; //这里正常来说其实是路由的范畴,不应该在这里引入 //Vue.use时在Vue对象注册要使用的全局组件
Vue.use(Router);
Vue.use(VueResource); //创建Vue实例
new Vue({
el: '#app', //模板html文件里面写一个div#app来放这个vue实例
router: new Router({
routes: [{path:'/',name:'login',component:login},{...},{...}]
}), //路由建议另外开一个文件来写,之后会另开博文介绍
template: '<app />',
components: {App}
});
App.vue:
<template>
<div id="app">
<router-view to="/"></router-view>
</div>
</template> <script>
export default {
name: 'App',
methods:{ }
}
</script> <style> </style>
我们给模板html的div#app插入了这个App组件,这个就是我们整个vue项目的根组件了,里面只放了一个router-view (路由插口),是我们上面写的router一对一控制的东西
根据路由配置,每一个url对应着一个组件,然后就会渲染到这个router-view上面。
vue+webpack开发(一)的更多相关文章
- vue+webpack开发(三)
上一篇博文讲了怎么使用路由,这次主要讲讲怎么编写一个vue组件 vue定义了一种“单文件组件”后缀为‘.vue’的文件,大概长这样子: <template> <div> < ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- 用Vue.js和Webpack开发Web在线钢琴
缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- Vue+Webpack构建移动端京东金融(一、开发前准备)
一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...
- Vue+Webpack构建去哪儿APP_一.开发前准备
一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...
- Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)
想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
随机推荐
- [BZOJ4144][AMPPZ2014]Petrol[多源最短路+MST]
题意 题目链接 分析 假设在 \(a \rightarrow b\) 的最短路径中出现了一个点 \(x\) 满足到 \(x\) 最近的点是 \(c\) ,那么我们完全可以从 \(a\) 直接走到 \( ...
- 微信小程序初体验与DEMO分享
前言 前一段时间微信公布小程序,瞬间引来了大量的关注.博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠). 这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝 ...
- js的各种正则表达式
验证各种手机包括成都"028-"开头的座机号验证 if (!(/^(16[8]|13[0-9]|15[0|3|6|7|8|9]|18[7])\d{8}|(028-)\d{7}$/. ...
- Runtime.getRuntime().addShutdownHook(Thread thread) 程序关闭时钩子,优雅退出程序
根据 Java API, 所谓 shutdown hook 就是已经初始化但尚未开始执行的线程对象.在Runtime 注册后,如果JVM要停止前,这些 shutdown hook 便开始执行.也就是在 ...
- Tomcat源码学习(1)
Tomcat源码学习(1) IntelliJ IDEA 17.3.3 导入 Tomcat 9.0.6源码 下载源码 tomcat_9.0.6 启动 IDEA. 点击 Open,选择刚才下载的文件解压后 ...
- BaseServlet 继承 httpServlet
BaseServlet 核心 package cn.core; import java.io.IOException; import java.lang.reflect.Method; impor ...
- git学习心得(1)
这次是第一次用git这个平台,还非常不熟练,尤其是在上传代码的步骤上,有好几次都出了问题,多次询问了同学才将代码上传到平台上,git是一个分布式版本控制系统,相对于集中式的来说具有很多优点,但是中文资 ...
- Django 图片上传、存储与显示
参考博客:http://www.cognize.me/2016/05/09/djangopic 开始之前要先安装python图像处理库:pip install --use-wheel Pillow 一 ...
- Photoshop一些常用的快捷键
1.按住Alt键,点击图层上的小眼睛,只显示当前图层 2.新建纯色图层,抠图 3.Fn+ num 调整不透明度 4.Shift + num 调整流量 5.调整图层透明度,在移动工具状态下,输入数字:0 ...
- Linux vi中查找字符内容的方法
使用vi编辑器编辑长文件时,常常是头昏眼花,也找不到需要更改的内容. 这时,使用查找功能尤为重要. 方法如下: 1.命令模式下输入“/字符串”,例如“/Section 3”. 2.如果查找下一个, ...