一、Vue脚手架

1、安装脚手架

脚手架是基于node的环境。

nodejs安装
脚手架全局安装：在cmd提示命令符中输入 npm i -g @vue/cli
检测是否安装成功：安装好后可输入vue -V 查看是否安装成功及版本号

2、创建项目

切换到根目录/项目需要所在目录：在cmd提示命令符中输入 cd /
创建一个项目： vue create myvue(名字随意命名，我这里项目命名为 myvue)

这里选第二个，然后等一段时间即可完成

如果你安装在C盘根目录，打开C盘就可以找到myvue文件：

3、Vue文件

node_modules 包下载地址
public 模板和共用文件地址
src 项目源文件目录
--assets 资源目录
--components 组件存放目录
--App.vue 项目根组件
--main.js 项目入口文件
.gitignore 规定哪些文件不上传
babel.confg.js ES6转ES5配置文件
jscofig.json js语法检测配置
package.json 项目包管理目录
package-lock.json 包下载缓存地址
README.md 项目说明目录
vue.config.js vue的配置文件

4、运行项目

切换到项目目录：在提示命令符中输入 cd /myvue
运行项目：然后输入 npm run serve

复制链接然后在浏览器打开即可（提示命令符不要关闭）

二、Vue路由

1、spa

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.router-view>div {width: 600px;height: 600px;border: 1px solid #ccc;}a {text-decoration: none;color: #000;}.nav a:hover {color: red;transition: .5s;}</style>
</head><body><!-- 导航 --><div class="nav"><a href="#/home" class="router-link">首页</a> |<a href="#/about" class="router-link">关于</a> |<a href="#/user" class="router-link">用户</a> |<a href="#/produce" class="router-link">产品</a></div><!-- 视图页面 --><div class="router-view"><div id="home">首页页面</div><div id="about">关于页面</div><div class="user">用户中心页面</div><div class="produce">产品页面</div></div>
</body>
<script>// 配置让 地址栏与组件一一对应起来var routes = [{ path: "/home", component: document.getElementById("home") },{ path: "/about", component: document.getElementById("about") },{ path: "/user", component: document.querySelector(".user") },{ path: "/produce", component: document.querySelector(".produce") }]// 监听hash变化window.onhashchange = handler;function handler() {// 拿到hash值var hash = location.hash.slice(1); //移除#号// 遍历routes配置，如果hash值等于遍历item的path值我们就让对应的component显示，否则隐藏routes.forEach(item => {if (item.path === hash) {// 如果path值与hash值相等显示对应componentitem.component.style.display = "block";} else {// 否则隐藏对应的componentitem.component.style.display = "none";}})}window.onload = function () {// 获取hash值var hash = location.hash || "#" + routes[0].path;// 设置hash值location.hash = hash;handler(); // 默认执行一次检查hash}
</script></html>

singlePageApplication：一个网站的所有页面都集成在一个html文件里面通过切换div模拟页面的切换
优点：资源公用；前后端分离；页面切换流畅
缺点：对SEO搜索引擎不友好
原理：地址改变，不刷新页面，监听地址栏变化实现页面局部更新
Hash路由：锚点（hash）变化不会刷新页面；window.onhashchange
历史记录路由：H5新增特性；history.onpopstate

2、创建Vue路由项目

切换到根目录/项目需要所在目录：在cmd提示命令符中输入 cd /
创建一个项目： vue create myroute(名字随意命名，我这里项目命名为 myroute)

1.这里选择第三个

2.找到对应选项按空格选中，然后按回车

3.选择第二个

4.这里输入n，然后按回车

5.选第一个按回车

6.选第一个按回车

7.选第一个按回车

8.输入N，按回车，然后等待一段时间即可完成

如果你安装在C盘根目录，打开C盘就可以找到myvue文件：

3、运行项目

切换到项目目录：在提示命令符中输入 cd /myvue
运行项目：然后输入 npm run serve

复制链接然后在浏览器打开即可（提示命令符不要关闭）

4、Vue路由文件

router/index.js 路由配置
store/index.js 全局数据配置
views 页面存储地址
---AboutView.vue 关于页面
---HomeView.vue 首页页面
App.vue 根节点

5、添加路由

1.在views文件夹中创建一个页面，如：UserView.vue (名字必须用驼峰式写法)

2.在router/index.js 配置路由

普通路由：

{
path:"/user", //匹配的地址
name:"user", //名称
component:()=>improt(xxx)  //配置对应的页面，xxx是文件路径
}

传参路由：

{
path:"/product/:id",
name:"product",
component:()=>import(xxx)
}//在ProduceView.vue获取
//{{$route.params.id}}

<template><div class="product"><h1>这里是产品页面 {{ $route.params.id }}</h1></div>
</template>

子路由：

{
path:"/admin",name:"admin",component:AdminView,children:[{path:"dash",name:"dash",component:DashView},{path:"even",name:"even",component:EvenView},{path:"",redirect:"dash"}]
}

子路由页面嵌套（AdminView.vue）：

<template><div><h1>后台管理页面</h1><div class="container"><div class="left">菜单<br /><router-link to="/admin/dash">概览</router-link><br /><router-link to="/admin/event">事件</router-link></div><div class="content">内容区域<!-- 存放子路由页面 --><router-view></router-view></div></div></div>
</template>

子路由+子路由页面嵌套效果：

404页面：

// 在最后面配置
{
path: "*",
name: "nomatch",
component: () => import('../views/NoMatch.vue')
}

效果：

3.在App.vue中添加链接（导航）

<template><div id="app"><nav class="p"><router-link to="/">首页</router-link> |<router-link to="/about">关于</router-link> |<router-link to="/user">用户</router-link> |<router-link to="/product/abc">产品abc</router-link> |<router-link to="/product/123">产品123</router-link> |</nav><router-view></router-view><!-- router-view 用来存放页面router-link 改变地址栏，改变hash值 --></div>
</template><script>
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

效果：

首页的内容可在views文件夹中的HomeView.vue中修改。

6、当前路由信息（$route）

name名称
params：路由的参数
path：地址信息
fullPath：全地址信息
hash：哈希值
query：查询参数
meta：元信息

7、编程跳转

<template><div class="user"><h1>这里是用户页面</h1><button @click="$router.back()">返回</button><button @click="$router.forward()">前进</button><button @click="$router.go(-1)">返回</button><button @click="$router.go(1)">前进</button><br /><button @click="$router.push('/about')">关于</button><button @click="$router.replace('/about')">关于(替换)</button><!-- replace 替换历史记录跳转到about页面，当前user页面不留历史记录 --></div>
</template>

Vue脚手架与Vue路由相关推荐

vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子
一.脚手架生成vue项目 1.安装脚手架:npm install -g @vue/cli 2.以图形界面创建vue项目 https://cli.vuejs.org/zh/guide/creating- ...
VUE脚手架介绍及安装教程
目录一.vue 是单文件组件 1.1之前注册组件有什么缺点 ? 1.2什么是单文件组件 :后缀为 .vue 的文件二.脚手架简介 2.1 webpack 三.脚手架介绍 3.1.vue-cli简介 ...
vue脚手架和html,Vue脚手架及Vue-router基本使用_含真_前端开发者
首先在大前提cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化 ...
vue脚手架基本使用
首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启es ...
Vue（Vue脚手架）
一.使用Vue脚手架(Vue Cli) Vue官方提供脚手架平台选择最新版本: 可以相加兼容的标准化开发工具(开发平台) 禁止:最新的开发技术版本和比较旧版本的开发平台 Vue CLI
Vue开发项目入门——Vue脚手架
1.什么是Vue脚手架 Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程.配置第三方依赖.编译vue工程. 特别注意:Vue脚手架是用来方便开发的, ...
使用 Vue 脚手架
3.1 初始化脚手架 3.1.1 说明 Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台). 最新的版本是 4.x. 文档: https://cli.vuejs.org/zh/. 3.1. ...
Vue脚手架安装与 Vue项目创建运行、vue项目迁移后运行失败问题
目录 Vue脚手架安装 vue 如何查看vue cli的安装位置 Vue项目创建与运行 1.创建项目 2.运行项目 3.检测运行是否成功项目文件作用介绍快捷安装项目所需依赖命令 npm i Vu ...
【Vue知识点- No2.】vue脚手架、基础API
No2.vue脚手架.基础API 必安装-vue-devtools 搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功 vscode-插件补充 v ...

Vue脚手架与Vue路由