以下实例代码地址：https://github.com/NewBLife/VueDev
1，Vue组件导入
新建组件：Header.vue
<template>
<div>
<p class="title">{{title}}</p>
</div>
</template> <script>
export default {
data:function(){
return{
title:'This is Header component'
}
}
}
</script> <style>
.title{
font-size: 20px;
font-weight: bold;
}
</style>
导入组件：
<template>
<div>
<header-component></header-component>
<p class="blue">This is App component.</p>
</div>
</template> <script>
import Header from './Header.vue'; export default {
components:{
'header-component':Header
}
}
</script> <style>
.blue{
color: blue;
}
</style>
2，Index.html文件复制
npm i html-webpack-plugin --save // webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
mode: 'development',
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
3，Jquery导入
npm i jquery --save-dev //webpack.config.js
const webpack = require('webpack'); module.exports = {
mode: 'development',
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
使用：
<template>
<div>
<my-header></my-header>
<p class="red" v-if="msg.length>0">
{{msg}}
</p>
<p v-else>
no text
</p>
<input type="text" v-model="msg">
<button @click="clear()">clear</button>
</div>
</template> <script>
import myHeader from './components/myheader.vue'; export default {
components:{
'my-header':myHeader
},
data:function(){
return {
msg :"Hello World"
}
},
methods:{
clear:function(){
this.msg =''
} },
// ready
mounted: function () {
this.$nextTick(function () {
var that = this
$.getJSON('http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?', {}, function (json) {
console.log(json)
that.msg = json.postalcodes[0].adminName1
})
})
}
}
</script> <style>
.red{
color:#f00;
}
</style>
4，Vue-router导入
router.js定义
import Top from './pages/top';
import About from './pages/about';
import Contract from './pages/contract';
import Userinfo from './pages/userinfo';
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }
const UserPostsHelp = { template: '<div>Posts Help</div>' } export default [{
path: '/',
component: Top
},
{
path: '/about',
component: About
},
{
path: '/contract',
component: Contract
},
{
path: '/user/:userId',
name: 'user',
component: Userinfo,
children: [{
path: 'profiles',
name: 'userprofile',
component: UserProfile
},
{
path: 'posts',
name: 'userpost',
components: {
default: UserPosts,
helper: UserPostsHelp
}
}
]
}
]
引用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter); import routes from './router'
const router = new VueRouter({
mode: 'history',
routes: routes
}); const app = new Vue({
el: '#app',
router
});
App.vue设置路由
<template>
<div>
<div class="header">
<router-link to="/">
top
</router-link>
<router-link to="about">
about
</router-link>
<router-link to="contact">
contact
</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
5，API访问
Axios方式（引入axios包）
<template>
<div>
<h1>Bitcoin Price Index</h1> <section v-if="errored">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section> <section v-else>
<div v-if="loading">Loading...</div> <div v-else v-for="currency in info" class="currency">
{{ currency.description }}:
<span class="lightena">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div> </section>
</div>
</template> <script>
import axios from 'axios'; export default {
data(){
return {
info:null,
loading:true,
errored:false
}
},
filters:{
currencydecimal(value){
return value.toFixed(2)
}
},
mounted() {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response=>{
this.info = response.data.bpi
})
.catch(error=>{
console.log(error)
this.errored =true
})
.finally(()=>this.loading=false)
},
}
</script> <style>
.lightena {
color: blue;
}
</style>
FetchAPI方式：不需要引用特殊的包。
<template>
<div>
<h1>Bitcoin Price Index</h1> <section v-if="errored">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section> <section v-else>
<div v-if="loading">Loading...</div> <div v-else v-for="currency in info" class="currency">
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div> </section>
</div>
</template> <script>
export default {
data(){
return {
info:null,
loading:true,
errored:false
}
},
filters:{
currencydecimal(value){
return value.toFixed(2)
}
},
mounted() {
fetch('https://api.coindesk.com/v1/bpi/currentprice.json', {
method: 'GET',
mode: 'cors'
})
.then(response=>{
return response.json();
})
.then(response=>{
this.info= response.bpi
})
.catch(error=>{
console.log(error)
this.errored =true
})
.finally(()=>this.loading=false)
},
}
</script> <style>
.lighten {
color: red;
}
</style>