vue2.0 vue-loader
vue-cli
npm install
脚手架: vue-loader
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})
vue2.0
vue-loader和vue-router配合 style-loader css-loader style!css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-demo</title>
<!-- <link rel="stylesheet" href="src/assets/css/animate.css"> 就不需要用loader了 -->
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
main.js
import Vue from 'vue'
import VueRouter from 'vue-router' import App from './App.vue'
import routerConfig from './router.config.js' import './assets/css/animate.css';
import './assets/css/1.css'; Vue.use(VueRouter); const router=new VueRouter(routerConfig); new Vue({
router,
el: '#app',
render: h => h(App)
})
router.config.js
import Home from './components/Home.vue'
import News from './components/News.vue' export default{
routes:[
{path:'/home', component:Home},
{path:'/news', component:News},
{path:'*', redirect:'/home'}
]
}
App.vue
<template>
<div id="app">
{{msg}}
<ul>
<li>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</li>
</ul>
<div>
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<router-view></router-view>
</transition>
</div>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <style>
html,body{ overflow:hidden; }
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
</style>
New.vue
<template>
<div id="news">
<h3>我是新闻页</h3>
<ul>
<li v-for="(val,index) in news">
{{val}}
</li>
</ul>
</div>
</template>
<script>
export default{
name:'news',
data(){
return {
news:['111111','22222222','3333333333','4444444444']
}
}
}
</script>
<style>
li{ border-bottom:1px dashed #dedede; }
</style>
Home.vue
<template>
<h3>我是主页</h3>
</template>
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue',
options: {
// vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style!css' //顺序定死的，否则不能loader Css,
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
package.json
{
"name": "vue-demo",
"description": "A Vue.js project",
"author": "strive <itstrive@sina.com>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --port 8085",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.0.1",
"vue-router": "^2.0.1"
},
"devDependencies": {
"animate.css": "^3.5.2",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"vue-loader": "^9.7.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.0"
}
}
vue2.0 vue-loader的更多相关文章
- vue2.0 vue.set()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0 vue.extend()的拓展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0 Vue.set的使用
原文链接: https://blog.csdn.net/qq_30455841/article/details/78666571
- VUE2.0学习总结
摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- vue2.0实践 —— Node + vue 实现移动官网
简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
随机推荐
- （WC2016模拟十一）【BZOJ4695】最假女选手
ps:好久没更博啦……这几天连着有模拟赛,等初赛前后休息的时候来疯狂补坑吧……顺便补一下前面的数论啥的? 题解: mdzz我场上写了个15分暴力长度跟标算差不多... 线段树大法好啊!这题听说很多人做 ...
- Linux 程序包管理-RPM
程序简介: POSIX(Portable Openratin System)跨平台系统:不同操作系统平台的标准C库(glibc)都是遵循POSIX规范的,这样基于标准库开发程序的源代码可以夸平台编译 ...
- vue之computed和watch
计算属性 computed 侦听器or观察者 watch 一直以来对computed和watch一知半解,用的时候就迷迷糊糊的,今天仔细看了看文档,突然茅塞顿开,原来就是这么简单啊: computed ...
- 【BZOJ 1218】 [HNOI2003]激光炸弹
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 一开始以为可以炸多次. 然后发现是一次. 那么久直接做个前缀和就好了 枚举正方形的左上角. 然后刚好和网格对齐的话. 肯定没有放在( ...
- HDU 2782 The Worm Turns (DFS)
Winston the Worm just woke up in a fresh rectangular patch of earth. The rectangular patch is divide ...
- 如何将visual studio 2010编辑模式改为插入？？？
按一下键盘上的 insert button 反之亦然
- HttpClient 图讲解明
大家刚看这个名字一定会想问这是什么东东,在这我特意百度百科了下 HTTP 协议可能是如今 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序须要直接通过 HTTP 协议来訪 ...
- LightOJ - 1132 Summing up Powers 矩阵高速幂
题目大意:求(1^K + 2^K + 3K + - + N^K) % 2^32 解题思路: 借用别人的图 能够先打表,求出Cnm,用杨辉三角能够高速得到 #include<cstdio> ...
- android 源码编译sdk
源码下载好以后,想要编译sdk,结果一直失败,今天终于找到正确方法来解决这个问题了. 使用make sdk 编译命令,结果一直报找不到资源.找不到bin/sqite3等,后来操作如下命令就可以了 1. ...
- bzoj1026: [SCOI2009]windy数（传说你是数位DP）
1026: [SCOI2009]windy数 题目:传送门 题解: 其实之前年少无知的时候好像A过...表示当时并不知道什么数位DP 今天回来深造一发... 其实如果对这个算法稍有了解...看到这题的 ...