1、首先下载项目
- npm install -g vue-cli-------全局安装vue-cli
- vue init webpack project-name-------webpack初始化项目
- cd project-name---------进入项目
- npm install------------webpack安装需要的包
- npm run dev-------------自动创建服务器并运行项目
2、代码的编写
-
import/export----------ES6导入与导出
-
创建hello.vue组件
每一个页面都是一个组件，都是一个vue文件，由template、JavaScript、style构成
template：<code><template></template></code>
注意：template标签内需要一个根标签，template最后会消失
JavaScript：<code><script></script></code>
注意：用export default{}-------模块默认导出
style：<code><style></style></code>
编写有关当前页面样式
3、路由 vue-router
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。
-
安装-------------npm install vue-router
-
引入-------------import VueRouter from “vue-router”
-
调用-------------Vue.use(VueRouter)
-
使用
- <code> <router-link to='/home'></router-link> </code>
最后会被渲染成a标签，通过to属性进行锚点的设置 - <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 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<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. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 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. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/home', component: Home},
{ path: '/mine', component: Mine}
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
//当然也可以这样写
const app = new Vue({
el:'#app',
template:'<App/>',
components:{App},
router
})
// 现在，应用已经启动了！
要注意：当<code><router-link></code>对应的路由匹配成功，将自动设置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、设置二级路由
-
子页面中正常编写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、处理网络请求
-
安装插件----------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); }) }
这就是做一个完整项目所用到的全部了，之后有时间我会做一个小项目做一个展示
网友评论