vue项目的简单搭建

最新推荐文章于 2024-05-11 09:04:35 发布

qq_45945240

最新推荐文章于 2024-05-11 09:04:35 发布

阅读量467

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45945240/article/details/125263079

版权

本文介绍了如何简单搭建一个Vue项目，包括创建项目、组件样式、清除默认样式、页面结构与路由配置、代码热更新、axios封装、解决跨域、接口封装、进度条插件集成以及async await的使用。适合Vue初学者。

摘要由CSDN通过智能技术生成

vue项目的简单搭建

前言

例如：改博客适合初学vue的同学

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建一个vue项目

vue create vuetest

二、组件页面样式

组件页面的样式使用的是less样式，浏览器不识别该样式，需要下载相关依赖
npm install --save less less-loader@5
如果想让组件识别less样式，则在组件中设置
<script scoped lang="less">

三、清除vue页面默认的样式

vue是单页面开发，我们只需要修改public下的index.html文件
代码如下（示例）：

<link rel="stylesheet" href="reset.css">

四、pages文件夹

创建pages文件夹，并创建路由组件
4.1创建router文件夹，并创建index.js进行路由配置，最终在main.js中引入注册

4.2 总结
路由组件和非路由组件区别：

非路由组件放在components中，路由组件放在pages或views中
非路由组件通过标签使用，路由组件通过路由使用
在main.js注册玩路由，所有的路由和非路由组件身上都会拥有$router $route属性
$router：一般进行编程式导航进行路由跳转
$route：一般获取路由信息（name path params等）
4.3 路由跳转方式

声明式导航router-link标签 ,可以把router-link理解为一个a标签，它也可以加class修饰
编程式导航：声明式导航能做的编程式都能做，而且还可以处理一些业务

import Vue from 'vue'
import VueRouter from 'vue-router'
import Swipe from '../components/Swipe'
import Txl from '../components/Txl'
import mi from '../components/mi'
import Skeleton from '../components/Skeleton'
Vue.use(VueRouter)
const routes=[
    {
   
        path:'/',
        redirect:'/mi'
    },
    {
   
        path:'/home',
        component:Swipe
    },
    {
   
        path:'/txl1',
        component:Txl
    },
    {
   
        path:'/mi/found',
        component:Skeleton
    },
    {
   
        path:'/login'
    },
    {
   
        path:'/mi',
        component:mi
    }

]
const router=new VueRouter({
   
    routes
})
export default router

五、路由传参

5.1、query、params

query、params两个属性可以传递参数
query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: “/search”
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
params参数对应的路由信息要修改为path: “/search/:keyword” 这里的/:keyword就是一个params参数的占位符