五月下--vue 路由和脚手架
vue路由
vue2.0路由基本使用：
一：基本使用:
1. 布局主页
2. 路由具体写法
//组件 （就是一个大的对象）
var Home={
template:' 我是主页'
};
var News={
template:'我是新闻'
};
//配置路由
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News}
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#box'
});
3. 重定向
{ path : '*' , redirect : '/home'} //其他所有的页面都指向home
二 ： 路由嵌套:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'}
];
三 ： 动态路由
/user/strive/age/:age
/user/strive/age/10
vue-cli脚手架
脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构
本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
有Eslint 检查代码规范，
有单元测试
webpack-simple 个人推荐使用, 没有代码检查 √
--------------------------------------------
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
2. 生成项目模板
vue init <模板名> 本地文件夹名称
vue init webpack-simple kimi
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue组件，官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init
|-webpack.config.js webpack配置文件
.vue文件 : 放置的是vue组件代码 html css js （平时代码、ES6） 用vue-loader来整合
单页面（SPA应用）应用使用vue-loader和vue-router来搭建
