Vue3 之vue-cli1
Vue3 之vue-cli1
1、如何用vue3的vue-cli搭建SPA
-
准备工作：安装nodejs : http://nodejs.cn/download/
-
npm install -g @vue/cli
-
vue --version
通过命令行方式创建：
-
vue create xxx-project
-
选择好项目存放的目录，打开命令创建创建，输入vue create helloworld
-
用键盘的方向键向下 ，选择vue3的语法即可。然后敲回车enter即可。会自动安装babel,eslint插件。
-
然后根据提示在命令提示符窗口依次输入cd helloworld和npm run serve （运行项目）
-
vue create --help
-
npm install vue-router@next --save
-
观察package.json的变化
通过图形界面方式创建：
-
vue ui
实现一个最最简单的SPA页面：
- 在App.vue中设置导航链接和组件渲染的位置，修改其模板内容。如下：
首页
新闻
图书
课程
视频
-
定义新闻，课程，视频，首页的路由页面组件
在项目的src目录下新建一个views页面，存放视图页面。如下：
Home.vue
<template>
<h1>我是首页h1>
template>
<script>
export default {
name: "Home.vue"
}
script>
<style scoped>
style>
Book.vue
<template><h1>我是课程h1>template><script>export default {name: "Course.vue"}script><style scoped>style>
News.vue
<template><h1>我是新闻h1>template><script>export default { name: "News.vue"}script><style scoped>style>
Video.vue
<template> <h1>我是视频h1>template><script>export default { name: "Video.vue"}script><style scoped>style>
- 在src新建一个目录router，定义index.js，配置路由规则信息。这也是项目中经常使用的方式。编辑该文件即可
// 1： 导入路由
//import {createRouter, createWebHashHistory} from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router'
// 2: 导入页面模板
// import News from '@/views/News'
// import Book from '@/views/Book'
// import Video from '@/views/Video'
// import Course from '@/views/Course'
//3: 创建路由器对象，将模板全部进行路由匹配和注册
const router = createRouter({
// HASH访问模式， http://localhost:8080/#news
//history: createWebHashHistory(),
// URL访问模式，http://localhost:8080/news
history: createWebHistory(),
routes: [
// 设置欢迎页面，就path设置成 "/"即可
{path: '/', meta:{title:"首页"},component: () => import("@/views/Home")},
{path: '/news', meta:{title:"新闻"},component: () => import("@/views/News")},
{path: '/course', meta:{title:"课程"},component: () => import("@/views/Course")},
{path: '/video', meta:{title:"视频"},component: () => import("@/views/Video")},
{path: '/book', meta:{title:"图书"},component: () => import("@/views/Book")},
]
})
router.afterEach(to => {
document.title = to.meta.title;
})
// 4: 导出模板router模块即可
export default router
- 在程序的入口main.js文件中，使用router实例让整个应用都有路由功能，代码如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
createApp(App).use(router).mount('#app')
至此前端路由就全部配置完毕了。打开终端窗口，输入：npm run serve命令。运行项目体验单页应用的前端路由即可
动态路由实现的两种方式：
-
基于query
URL中带有查询参数的形式为：
/book?id=1,这在传统的web应用程序中是非常场景的。在单页程序开发中，也支持路径中的查询参数。只不过参数放在的是：$route.query中。
Book.vue
我是书籍
-
{{book.id}}====={{book.title}}=====
查看明细1
查看明细2
图书1
图书2
BookDetail.vue
图书ID：{{ $route.params.id }}
图书ID：{{ $route.query.id }}
index.js
const router = createRouter({
// HASH访问模式， http://localhost:8080/#news
//history: createWebHashHistory(),
// URL访问模式，http://localhost:8080/news
history: createWebHistory(),
routes: [
// 设置欢迎页面，就path设置成 "/"即可
{path: '/', meta:{title:"首页"},component: () => import("@/views/Home")},
{path: '/news', meta:{title:"新闻"},component: () => import("@/views/News")},
{path: '/course', meta:{title:"课程"},component: () => import("@/views/Course")},
{path: '/video', meta:{title:"视频"},component: () => import("@/views/Video")},
{path: '/book', meta:{title:"图书"},component: () => import("@/views/Book")},
{path: '/book2', meta:{title:"书籍明细2"},component: () => import("@/views/BookDetail")},
{path: '/book/:id', meta:{title:"图书明细"},component: () => import("@/views/BookDetail")},
// eslint-disable-next-line no-undef
]
})
- 基于params(推荐)
Book.vue
我是书籍
-
{{book.id}}====={{book.title}}=====
查看明细1
查看明细2
Books.js
function loadBooks(){
return [
{id:1,title:"Java1",author:"taimi1"},
{id:2,title:"Java2",author:"taimi2"},
{id:3,title:"Java3",author:"taimi3"},
{id:4,title:"Java4",author:"taimi4"},
];
}
export default loadBooks();
BookDetail.vue
图书ID：{{ $route.params.id }}
在router/index.js
// 1： 导入路由
//import {createRouter, createWebHashHistory} from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router'
// 2: 导入页面模板
// import News from '@/views/News'
// import Book from '@/views/Book'
// import Video from '@/views/Video'
// import Course from '@/views/Course'
//3: 创建路由器对象，将模板全部进行路由匹配和注册
const router = createRouter({
// HASH访问模式， http://localhost:8080/#news
//history: createWebHashHistory(),
// URL访问模式，http://localhost:8080/news
history: createWebHistory(),
routes: [
// 设置欢迎页面，就path设置成 "/"即可
{path: '/', meta:{title:"首页"},component: () => import("@/views/Home")},
{path: '/news', meta:{title:"新闻"},component: () => import("@/views/News")},
{path: '/course', meta:{title:"课程"},component: () => import("@/views/Course")},
{path: '/video', meta:{title:"视频"},component: () => import("@/views/Video")},
{path: '/book', meta:{title:"图书"},component: () => import("@/views/Book")},
{path: '/book/:id', meta:{title:"图书明细"},component: () => import("@/views/BookDetail")},
]
})
router.afterEach(to => {
document.title = to.meta.title;
})
// 4: 导出模板router模块即可
export default router
2、有哪些要注意的点
- 官网：https://cli.vuejs.org/zh/
- vue3关注文档：https://v3.cn.vuejs.org/guide/introduction.html
- 使用idea建议安装vue插件
- 当匹配到一个路由时，参数的值被保存到
this.$route.params中，this.route代表当前那个路由对象中，可以在组件内使用。 - 如何对动态路由通过自己的逻辑判断，进行整合！
图书ID：{{ $route.params.id }}
图书ID：{{ $route.query.id }}
图书ID：{{ valueId}}
老师的代码
你查看的书籍ID---params是：{{$route.params.id}}
你查看的书籍ID---query是：{{$route.query.id}}
你查看的书籍ID---封装的是：{{getParameter("id")}}
3、他们的关系图
node_modules 项目依赖模块 ，开发的时候使用，打包的时候会自动的过滤一些。
public ---该目录下的文件不会被webpack编译压缩处理，引用的第三方库的js文件可以放这里
favicon.ico 图标文件
index.html 项目的主页面
src 项目代码的主目录
assets 存放项目中的静态资源，如css，图片等。
logo.png logo图片
components 组件存放目录
HelloWorld.vue vuecli默认创建的Helloworld组件
App.vue 项目根组件
main.js 程序入口js文件，加载各种公共组件和所需用到的插件。
.gitignore 如果配置了git提交项目代码时忽略那些文件和文件夹进行提交
babel.config.js babel使用的配置文件
package.json npm的配置文件，其中设定了脚本和项目依赖的各种库。
package-lock.json 用于锁定项目实际安装的各个npm包的具体来源和版本号
README.md 项目说明文件