vue做为当前流行的框架之一,其中路由配置也是难点以及重点:
一 :首先是如何通过webpack创建一个vue项目:
vue的项目必须依赖node 以及webpack
node可以直接在官网下载:
打开命令cmd 输入 node -v 可以查看是否安装成功以及安装版本
全局安装webpack:$ npm install webpack -g
然后是通过node安装vue脚手架:
- cmd打开命令行窗口
- 输入
cnpm install vue-cli -g
,然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令) - 安装结束后输入vue 如果显示版本号继续下一步操作
- 运行
vue init webpack demo
(注:项目名称)回车 - 显示Project nanme 目录名 回车 project description 后面可以写上描述,或者直接回车
Author 后面可以写作者也可以回车 Install vue-router?
选择Y //是否使用vue路由User ESLint to lint your code?
选Y //是否选择检测代码规范Setup unit tests with Karma + Mocha?
问的是否要测试 选nSetup e2e tests with Nightwatch?
选n- cd>‘项目文件’ //找到vue项目文件
npm run dev
//运行项目文件
二:接下来主要介绍vue路由的配置
import Vue from 'vue'
//指向当前项目
import Router from 'vue-router'
//引入vue路由
import HelloWorld from 'components/HelloWorld'
//引入需要的组健
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘HelloWorld',//路径 一定要要在项目中build文件夹找到 webpack.base.cofing文件配置文件的路径 否则必须写相对路径
name: 'HelloWorld', //名称
component: HelloWorld //组件名称
}
]
})
webpack.base.cofing文件配置文件的路径
resolve: { HelloWorld: components/HelloWorld', //前面为项目中真实路径 后面为项目文件的相对路径 },
直接定义路由组件
constgoods = {template:'
goods
'};constratings = {template:'
ratings
'};constseller = {template:'
seller
'};
import引入路由组件
import goods from'components/goods/goods';
import ratings from'components/ratings/ratings';
impor tseller from'components/seller/seller';
// 然后定义路由(routes),components还可以是Vue.extend()创建的
constroutes = [ {path:'/goods',component: goods }, {path:'/ratings',component: ratings }, {path:'/seller',component: seller }];
// 接着创建路由实例
constrouter =newVueRouter({
// ES6缩写语法,相当于routes:routesroutes
});
// 最后创建vue实例并挂载constapp =newVue({el:'#app', router});
// 或者constapp =newVue({ router}).$mount('#app')