Vue3 之vue-cli1

宁兴修

2023-12-01

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中设置导航链接和组件渲染的位置，修改其模板内容。如下：

<template>
  <div>
    <header>
      <router-link to="/">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/book">图书</router-link>
      <router-link to="/course">课程</router-link>
      <router-link to="/video">视频</router-link>
    </header>
    <article>
      <router-view></router-view>
    </article>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

定义新闻，课程，视频，首页的路由页面组件

在项目的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

<template>
    <h1>我是书籍</h1>
    <ul>
        <li v-for="(book,index) in bookList" :key="book.id+index">
            <p>
                {{book.id}}====={{book.title}}=====
                <router-link :to="'/book/'+book.id">查看明细1</router-link>
                <a :href="'/book/'+book.id">查看明细2</a>
            </p>


            <p>
                <router-link :to="'/book2?id='+book.id">图书1</router-link>
                <router-link :to="'/book2?id='+book.id">图书2</router-link>
            </p>
        </li>
    </ul>
</template>

BookDetail.vue

<template>
    <div>图书ID：{{ $route.params.id }}</div>
    <div>图书ID：{{ $route.query.id }}</div>
</template>
<script>
    export default {
        data(){
            return {
            }
        }
    }
</script>

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

<template>
    <h1>我是书籍</h1>
    <ul>
        <li v-for="(book,index) in bookList" :key="book.id+index">
            <p>
                {{book.id}}====={{book.title}}=====
                <router-link :to="'/book/'+book.id">查看明细1</router-link>
                <a :href="'/book/'+book.id">查看明细2</a>
            </p>
        </li>
    </ul>
</template>

<script>
    //实际开发中Books数组很有可能通过axios从后台获取！
    import  Books from '@/service/Books'

    export default {

        // eslint-disable-next-line vue/multi-word-component-names
        name: "Book",
        data(){
            return {
                bookList:Books
            }
        }
    }
</script>

<style scoped>

</style>

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

<template>
    <div>图书ID：{{ $route.params.id }}</div>
</template>
<script>
    export default {
        data(){
            return {
            }
        }
    }
</script>

在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代表当前那个路由对象中，可以在组件内使用。
如何对动态路由通过自己的逻辑判断，进行整合！

<template>
    <div>图书ID：{{ $route.params.id }}</div>
    <div>图书ID：{{ $route.query.id }}</div>
    <div>图书ID：{{ valueId}}</div>
</template>
<script>
    export default {
        data(){
            return {
                valueId:""
            }
        },
        created() {
            this.returnId()
        },
        methods:{
            returnId(){

                if(this.$route.params.id){
                    this.valueId = this.$route.params.id
                }else if(this.$route.query.id ){
                    this.valueId = this.$route.query.id
                }
            }
        }
    }
</script>

老师的代码

<template>
    <h1>你查看的书籍ID---params是：{{$route.params.id}}</h1>
    <h1>你查看的书籍ID---query是：{{$route.query.id}}</h1>
    <h1>你查看的书籍ID---封装的是：{{getParameter("id")}}</h1>
</template>

<script>
  export default {
    name: "BooksDetail",
    created() {
       this.getParameter("id")
    },
    methods:{
       getParameter(field){
           return this.$route.query[field] || this.$route.params[field];
       }
    }
  }
</script>

<style scoped>

</style>

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 项目说明文件

Vue3 之vue-cli1

Vue3 之vue-cli1

1、如何用vue3的vue-cli搭建SPA

2、有哪些要注意的点

3、他们的关系图

相关阅读

相关文章

相关问答

相关文档