vue24-webpack+vue-loader
手动配置自己:
webpack+vue-loader webpack加载模块
-------------------------------------
如何运行此项目？
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
} 以后下载模块：
npm install <package-name> --save-dev EADDRINUSE 端口被占用 少了:
webpack-dev-server
webpack
----------------------------------------
.vue 结尾，之后称呼组件
----------------------------------------
路由:
vue-router -> 如何查看版本:
bower info vue-router 路由使用版本: 0.7.13
配合vue-loader使用:
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router' 3. Vue.use(VueRouter); 4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
5. 开启
router.start(App,'#app'); 注意:
之前: index.html -> <app></app>
现在: index.html -> <div id="app"></div> App.vue -> 需要一个 <div id="app"></div> 根元素 home news
---------------------------------------------
路由嵌套:
和之前一模一样
--------------------------------------------
上线:
npm run build
-> webpack -p
--------------------------------------------
脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构 本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范，
单元测试
webpack-simple 个人推荐使用, 没有代码检查 √ browserify -> 自己看
browserify-simple --------------------------------------------
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev
--------------------------------------------
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
<!--
入口main.js: import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js' Vue.use(VueRouter); //配置路由
const router=new VueRouter(); router.map(routerConfig);
routerConfig：
//专门配置路由规则
//引入模块
import Home from './components/Home.vue' :
Home.vue:
<template>
<h3>我是主页</h3>
<ul>
<li><a v-link="{path:'/home/login'}">用户登录</a></li>
<li><a v-link="{path:'/home/reg'}">用户注册</a></li>
</ul>
<div class="box">
<router-view></router-view>
</div>
</template>
<style scope>
.box{
border:1px dashed #000;
}
</style>
import News from './components/News.vue'
News.vue:
<template>
<h3>我是新闻</h3>
<ul>
<li><a v-link="{path:'/news/detail/001'}">第一条新闻</a></li>
<li><a v-link="{path:'/news/detail/002'}">第二条新闻</a></li>
</ul>
<router-view></router-view>
</template>
import Login from './components/Login.vue'
Login.vue：
<template>
<h3>用户登录</h3>
</template>
import Reg from './components/Reg.vue'
Reg.vue：
<template>
<h3>用户注册</h3>
</template>
import Detail from './components/Detail.vue' :
<template>
<strong>
{{$route.params | json}}
<br>
{{$route.query | json}}
</strong>
</template>
export default{
'/home':{
component:Home,
subRoutes:{
'login':{
component:Login
},
'reg':{
component:Reg
}
}
},
'/news':{
component:News,
subRoutes:{
'detail/:id':{
component:Detail
}
}
}
}
router.redirect({
'/':'/home'
}); router.start(App,'#app');
App.vue:
<template>
<div id="app">
<h3>vue-loader+ vue-router</h3>
<div>
<a v-link="{path:'/home'}">主页</a>
<a v-link="{path:'/news'}">新闻</a>
</div>
<router-view></router-view>
</div>
</template>
<script> </script>
<style>
body{
background: #ccc
}
.v-link-active{
font-size: 20px;
color: #f60;
}
</style>
-->
</body>
</html>
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js' Vue.use(VueRouter);//使用vue-router必写 //配置路由
const router=new VueRouter(); router.map(routerConfig); router.redirect({
'/':'/home'
}); router.start(App,'#app');
App.vue
<template>
<div id="app">
<h3>vue-loader+ vue-router</h3>
<div>
<a v-link="{path:'/home'}">主页</a>
<a v-link="{path:'/news'}">新闻</a>
</div>
<router-view></router-view>
</div>
</template>
<script> </script>
<style>
body{
background: #ccc
}
.v-link-active{
font-size: 20px;
color: #f60;
}
</style>
Menu.vue
<template>
<ul>
<li v-for="val in list">
{{val}}
</li>
</ul>
</template>
<script>
export default{
data(){
return {
list:['apple','banana','orange']
}
}
}
</script>
router.config.js
//专门配置路由规则 //引入模块
import Home from './components/Home.vue'
import News from './components/News.vue'
import Login from './components/Login.vue'
import Reg from './components/Reg.vue'
import Detail from './components/Detail.vue' export default{
'/home':{
component:Home,
subRoutes:{
'login':{
component:Login
},
'reg':{
component:Reg
}
}
},
'/news':{
component:News,
subRoutes:{
'detail/:id':{
component:Detail
}
}
}
}
Detail.vue Home.vue Login.vue News.vue Reg.vue
<template>
<strong>
{{$route.params | json}}
<br>
{{$route.query | json}}
</strong>
</template>
<template>
<h3>我是主页</h3>
<ul>
<li><a v-link="{path:'/home/login'}">用户登录</a></li>
<li><a v-link="{path:'/home/reg'}">用户注册</a></li>
</ul>
<div class="box">
<router-view></router-view>
</div>
</template>
<style scope>
.box{
border:1px dashed #000;
}
</style>
<template>
<h3>用户登录</h3>
</template>
<template>
<h3>我是新闻</h3>
<ul>
<li><a v-link="{path:'/news/detail/001'}">第一条新闻</a></li>
<li><a v-link="{path:'/news/detail/002'}">第二条新闻</a></li>
</ul>
<router-view></router-view>
</template>
<template>
<h3>用户注册</h3>
</template>
webpack.config.js
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel', exclude:/node_modules/}
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
};
package.json
{
"name": "vue-loader-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --port 8083",
"build":"webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.25.0",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"vue": "^1.0.28",
"vue-router": "^0.7.13"
}
}
vue24-webpack+vue-loader的更多相关文章
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- webpack +vue开发（3）
webpack的一些有用的命令 webpack --display-modules 在终端显示这些module,另外一个推荐使用 webpack --display-modules --display ...
- webpack +vue开发（2）
我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- gulp+webpack+vue
gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...
- webpack + vue最佳实践
webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...
- webpack vue 配置
vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.js ...
- webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇
新建项目 开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_p ...
- webpack+vue 我的视角（持续更新）
最近一直在研究webpack+vue的组合拳,现在分享一下: webpack就是一个项目管理工具,可以各种模块化加载,然后压缩,当然还有热加载技术(时灵时不灵..) vue是mv*模式的框架,组件化开 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
随机推荐
- （2016北京集训十）【xsy1530】小Q与内存
一道很有意思的神题~ 暴力平衡树的复杂度很对(并不),但是$2^{30}$的空间一脸屎 这题的正解是一个类似线段树的数据结构,我觉得很有创新性Orz 首先可以想到一种暴力就是用一个点代表一个区间,然后 ...
- 紫书 例题8-14 UVa 1607 （二分）
题意非常难理解-- #include<cstdio> #define REP(i, a, b) for(int i = (a); i < (b); i++) using namesp ...
- 部署OGG时字符集转换问题--oracle to oracle已验证，其他异构环境应当也适用
之前在安装OGG总是遇到字符集问题,尤其是多源端对一个目标端时,源端字符集不同,导致出现字符集问题 无法同步数据,查阅了大量的园子资料,都说要设置复制或抽取进程中SETENV (NLS_LANG=AM ...
- android自己定义圆盘时钟
自己定义圆盘时钟的大概流程:由于圆盘时钟的圆盘是不须要动的,所以不必要加在自己定义的view里面,在view里面仅仅须要绘制秒针和分针时针并控其转动就可以. 下面就是自己定义view的主要代码: pa ...
- Angry IP Scanner 获取设备的IP
给大家介绍一款软件Angry IP scanner,这款软件最大的用处就是能够扫描某一网段的各个主机的ip.通过使用发现,原理就是通过高速的ping每一个ip,假设有主机存在.就获取这个主机的user ...
- phpcms v9会员推荐位
模版显示推荐会员代码 <div class="zhanxun2"> <div class="title"> ...
- BZOJ1468: Tree & BZOJ3365: [Usaco2004 Feb]Distance Statistics 路程统计
[传送门:BZOJ1468&BZOJ3365] 简要题意: 给出一棵n个点的树,和每条边的边权,求出有多少个点对的距离<=k 题解: 点分治模板题 点分治的主要步骤: 1.首先选取一个点 ...
- matplotlib 可视化 —— 定制画布风格 Customizing plots with style sheets（plt.style）
Customizing plots with style sheets - Matplotlib 1.5.1 documentation 1. 使用和显示其他画布风格 >> import ...
- 安卓通过Json注册登录
对于刚开始做安卓的来说,可能一个好的Demo比什么都来得快,但是最近在做安卓登录注册的时候,发现基本找不到我想要的东西,无奈只好硬着头皮做,好在不负付出,终于搞定,也算是给自己一个交待. 从结构上说, ...
- 增强for循环的使用详解及代码
首先说一下他的语法结构: for(数据类型 变量 :集合){ //这里写要遍历的元素,或者所需要的代码即可//如果集合中存放的是对象,可以获取到每个对象(数据类型=对象类型 变量(遍历出来的每个对象) ...