1杀狡、首先下載項目
- npm install -g vue-cli-------全局安裝vue-cli
- vue init webpack project-name-------webpack初始化項目
- cd project-name---------進入項目
- npm install------------webpack安裝需要的包
- npm run dev-------------自動創(chuàng)建服務(wù)器并運行項目
2宾袜、代碼的編寫
import/export----------ES6導(dǎo)入與導(dǎo)出
創(chuàng)建hello.vue組件
每一個頁面都是一個組件价捧，都是一個vue文件抗悍，由template埠褪、JavaScript诞丽、style構(gòu)成
template：<code><template></template></code>
注意：template標(biāo)簽內(nèi)需要一個根標(biāo)簽鹉勒，template最后會消失
JavaScript：<code><script></script></code>
注意：用export default{}-------模塊默認(rèn)導(dǎo)出
style：<code><style></style></code>
編寫有關(guān)當(dāng)前頁面樣式
3磅轻、路由 vue-router
用 Vue.js + vue-router 創(chuàng)建單頁應(yīng)用珍逸，是非常簡單的。使用 Vue.js 時聋溜，我們就已經(jīng)把組件組合成一個應(yīng)用了谆膳，當(dāng)你要把 vue-router 加進來，只需要配置組件和路由映射勤婚，然后告訴 vue-router 在哪里渲染它們摹量。
安裝-------------npm install vue-router
引入-------------import VueRouter from “vue-router”
調(diào)用-------------Vue.use(VueRouter)
-
使用
- <code> <router-link to='/home'></router-link> </code>
最后會被渲染成a標(biāo)簽，通過to屬性進行錨點的設(shè)置 - <code><router-view></router-view></code>
- 編寫路由代碼
- <code> <router-link to='/home'></router-link> </code>
html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導(dǎo)航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
JS代碼
// 0. 如果使用模塊化機制編程馒胆，導(dǎo)入Vue和VueRouter缨称，要調(diào)用 Vue.use(VueRouter)
// 1. 定義（路由）組件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 可以從其他文件 import 進來
import Home from ‘./pages/home’
import Mine from ‘./pages/mine’
// 2. 定義路由
// 每個路由應(yīng)該映射一個組件祝迂。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器睦尽，
// 或者，只是一個組件配置對象型雳。
// 我們晚點再討論嵌套路由当凡。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/home', component: Home},
{ path: '/mine', component: Mine}
]
// 3. 創(chuàng)建 router 實例山害，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes
})
// 4. 創(chuàng)建和掛載根實例沿量。
// 記得要通過 router 配置參數(shù)注入路由浪慌，
// 從而讓整個應(yīng)用都有路由功能
const app = new Vue({
router
}).$mount('#app')
//當(dāng)然也可以這樣寫
const app = new Vue({
el:'#app',
template:'<App/>',
components:{App},
router
})
// 現(xiàn)在，應(yīng)用已經(jīng)啟動了朴则！
要注意：當(dāng)<code><router-link></code>對應(yīng)的路由匹配成功权纤，將自動設(shè)置class屬性值.router-link-active。查看API文檔
下面展示一下大牛寫的完整的代碼吧乌妒！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.router-link-active {
color: red;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 0. If using a module system, call Vue.use(VueRouter)
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')
// Now the app has started!
</script>
</body>
</html>
4汹想、設(shè)置二級路由
-
子頁面中正常編寫router-link和router-view
<div class="menu"> <router-link to="mine/one">ONE</router-link> <router-link to="mine/two">TWO</router-link> </div> <router-view></router-view> -
配置二級路由
const routers = [ {path:'/mine',component:Mine,children:[ {path:'one',component:One}, {path:'two',component:Two} ]} ]
5、處理網(wǎng)絡(luò)請求
安裝插件----------npm install vue-resource
引入并使用
import VueResource from 'vue-resource';
Vue.use(VueResource);-
代碼
mounted(){ this.$http.get('http//www.vrserver.applinzi.com/aixianfeng/apihomehot.php').then(function(res){ console.log(res); }) }
這就是做一個完整項目所用到的全部了撤蚊，之后有時間我會做一個小項目做一個展示
