vue项目创建步骤及路由router

1、创建一个vue项目步骤 (windows环境下)。创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js、webpack、vue-cli)。cmd打开终端。

1.1 如果还没安装node.js, 则先安装node.js ,安装完成后,查看node版本

node -v

1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.3 安装webpack

npm install webpack -g

1.4 安装vue全局脚手架,vue-cli2.x使用  npm install -g vue-cli  , vue-cli3.x使用   npm install -g @vue/cli   安装, 查看vue版本: vue -V 

npm install -g vue-cli

  或

npm install -g @vue/cli

1.5 准备工作做好了,开始正式创建vue项目, 创建vue项目可以选择两种方式。下面的my_vue_pro是vue项目名字

vue init webpack my_vue_pro

  或

vue create my_vue_pro

   vue init  是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的src目录覆盖3.x的src目录。 vue  create   是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与vue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档

  如果vue版本还是2.x, 从vue-cli2.x升级到最新版:先执行卸载: npm uninstall -g vue-cli  , 再安装最新版  npm install -g @vue/cli 

1.6  cd进入项目

cd my_vue_pro

1.7 添加需要的依赖包,比如添加vue路由vue-router依赖包,可以使用  npm install vue-router  , 或者  vue add router 

npm install vue-router

  或

vue add router

1.8 安装所有依赖包, npm install  。卸载依赖包: npm uninstall xxx

cnpm install

1.9 运行项目,查看package.json文件中的scripts脚本中的运行方式, npm run dev  或  npm  run serve 

npm run serve

2、vue路由vue-router解说

  Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的链接

HTML5 历史模式或 hash 模式,在 IE9 中自动降级

自定义的滚动条行为

为了加深对路由的理解,在安装vue-router包后,如果项目自动生成了router.js, 先删除,我们手动来写一个router.js。创建router.js后,再新增加2个vue页面,命名pageA和pageB,如下图:

vue项目创建步骤及路由router

其中router.js代码

import Vue from 'vue' import Router from 'vue-router' //自定义页面 import PageA from './views/PageA' import PageB from './views/PageB' //安装路由到vue Vue.use(Router) const routes = [ { path: 'https://www.jb51.net/', redirect: '/pageB' //重定向,设置默认进入pageB页面 }, { //动态路径参数,以冒号开头,如果有多个参数则继续往后面追加 path: '/pageA/:id/:name', name: 'pageA', component: PageA }, { path: '/pageB', name: 'pageB', component: PageB } ] export default new Router({ //mode: 'hash', //默认hash模式,hash模式有#;另外还有一种history模式,没有#符号 routes })

main.js是vue项目的入口脚本,在这里引入router.js, 传入路由配置。

import Vue from 'vue' import App from './App.vue' import router from './router.js' Vue.config.productionTip = false new Vue({ router, //key名字必须命名为router render: h => h(App) }).$mount('#app')

2.1 路由视图<router-view> 组件和 路由导航<router-link>组件

 在项目启动模板页App.vue上面有个<router-view>路由视图组件,相当于是一个占位符一样(<slot>插槽也类似),之后页面的路由变化引起的页面替换都是在<router-view>路由视图上进行。

  而<router-link>有点类似于超链接标签<a>,<router-link>上有个必写的属性to, 就类似于超链接<a>的href属性,设置要跳转的路由链接。

  App.Vue测试代码:

<template> <div> <div> <router-link to="/pageA/5188/王大锤">pageA</router-link> | <router-link to="/pageB">pageB</router-link> </div> <router-view/> </div> </template>

2.2 路径参数和查询参数

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/172856f0e83b2c86bd3a39d0f1e1fe8e.html