0、知识点
- 搭建开发环境
1、搭建Vue开发环境
2、安装vue-cli脚手架
- 安装命令
// 第一种:
npm install --global vue-cli
// 第二种
cnpm install --global vue-cli
3、创建基于webpack的项目
-
给项目命名为vue-project
-
vue init webpack vue-project
-
vue init webpack-simple vue-project // 简捷的安装方式
-
切入到vue-project目录
cd vue-project
- 安装依赖
npm install
- 运行项目
npm run dev
4、配置路由
- 安装路由:
npm install vue-router
- 安装完vue-router后,需要重新启动项目
npm run dev
5、main.js
import Vue from 'vue'
import App from './App.vue'
//引入路由 use路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1、创建引入组件
import Start from './components/Start.vue';
import Home from './components/Home.vue';
import Hot from './components/Hot.vue';
import Order from './components/Order.vue';
import Pcontent from './components/Pcontent.vue';
import Search from './components/Search.vue';
import Cart from './components/Cart.vue';
//2、配置路由
const routes = [
{ path: '/start', component: Start },
{ path: '/home', component: Home },
{ path: '/hot', component: Hot },
{ path: '/order', component: Order },
{ path: '/pcontent', component: Pcontent },
{ path: '/search', component: Search },
{ path: '/cart', component: Cart },
{ path: '*', redirect: '/start' }
]
//3、实例化VueRouter
const router = new VueRouter({
routes // (缩写)相当于 routes: routes 属性的简写
})
//4、挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5、需要 <router-view></router-view> 放在根组件里面
6、App.vue
<template>
<div id="app">
<router-link to="/start">开始</router-link>
<router-link to="/home">点餐</router-link>
<router-link to="/cart">购物车</router-link>
<br />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="scss">
</style>