Vue 基础布局：webpack搭建项目，组件化开发，路由。

最新推荐文章于 2024-04-22 09:42:52 发布

QAQ_0

最新推荐文章于 2024-04-22 09:42:52 发布

阅读量533

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： VUe.js webpack 组件化开发路由

本文链接：https://blog.youkuaiyun.com/qq_37662737/article/details/88749420

Vue.js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用webpack搭建Vue项目，详细讲解了组件化开发、路由设置以及手机端设备宽度配置。从创建webpack项目、设置资源文件包、编写App.vue入口页，到加载rem.js、使用font字体图标，再到实现路由功能，提供了全面的基础布局和路由应用总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读
使用 webpack 搭建项目，使用了组件化开发，路由。本文主要写的是基础布局和路由的使用的相关知识总结。

如何创建webpack项目
手机端设备宽度设置
assets 资源文件包
App.vue 入口页
rem.js 文件
子组件的引用
字体图标 font
使用路由

创建webpack项目

使用webpack模版创建项目开发环境
创建一个基于webpack简单的vue开发环境

vue init webpack-simple myapp

先进入到项目，然后根据package.json，安装依赖。

cd myapp
npm install

开发时，查看项目,运行项目

npm run dev

开发环境的入口

/src/main.js

下载依赖包

npm i

运行项目

npm run dev

手机端设备宽度设置

meta-vp

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

assets 资源文件包

在 assets 目录下创建 style 文件夹，用来存放 css 基础样式文件。创建 js 文件夹，用来存放引用的 js 文件。

App.vue 入口页

主页面写在 App.vue 的template中

<template>
  <div id="app" class="container">
  <!-- 使用子组件 -->
    <Header class="header"></Header>
    <!-- 使用路由 -->
     <router-view class="main">main</router-view>
     <!-- <div class="main">main</div> -->
      <Footer class="footer"></Footer>
  </div>
</template>

<script>
// 在这里导入子组件
import Header from "./components/header/Index";
import Footer from "./components/footer/Index";

export default {
  name: 'app',
  data () {
    return { 

    }
  },
  components:{
    Header,
    Footer
  }
}
</script>

<style>
  //css 样式
</style>

src 下的文件夹

在 src 下新建 page 文件夹，和 components 文件夹。page 文件夹用来存放页面文件组件，components 文件夹用来做每个具体组件的功能。

rem.js 文件

引入 rem.js 文件，放在 assets/js 目录下。rem.js 的作用是根据设计稿以及用户所持的设备去计算比例。
页面宽高使用的单位为 rem 。 1rem = 100px ，750宽度的设计稿的高度为 100px ,则写为 1rem 。在750的宽度下，手机端显示的宽高为 50px 。默认使用的为750宽度，如果为其他宽度的设计稿，将文件最后一行的值改为指定设计稿的宽高。

加载 rem.js 及 reset.css 的方式

import "./assets/style/reset.css";
import "./assets/js/rem.js";

也可以省略后面的扩展名，写为
import "./assets/style/reset";
import "./assets/js/rem";

pages、 components 文件下的子组件

可以文件夹的形式放一个组件，pages目录下，创建 index 、goods 、buycar 、mine 四个文件夹，每个文件夹下分别存放有 Index.vue 的子组件。

在App.vue 入口文件中的 script 标签中，使用一下语句格式引入子组件。

路径到文件夹，默认加载文件夹下的Index.vue文件
import Header from "./components/header";
import Header from "./components/footer";

注册子组件

//写在 export default 中
export default {
 
  components:{
    Header
  }
}

在template中写入子组件

<template>
  <div id="app" class="container">

    <Header class="header"></Header>
      <Footer class="footer"></Footer>

  </div>
</template>

字体图标 font

https://www.bootcdn.cn/
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
在这个网站可以下载 font 字体图标。首页搜索 font ，在这里使用了下载次数最多的， font-awesome 。
可以使用 link 标签引入，也可以下载到项目中。

//link标签引入
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.css" rel="stylesheet">

也可以把 font 文件下载到本地，放在 assets 文件夹下，通过import引入

//在 main.js 文件中引入
import "./assets/font-awesome-4.7.0/css/font-awesome.min.css"

Uncaught Error: Module parse failed: Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

解决方案：只需要在 webpack.config 文件中进行配置。
由于配置文件被修改，此时需要重启服务，就可以解决问题了。ctrl + C 断开服务。npm run dev 启动服务。

// 在路由规则中，加入下列代码
{
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
 }

使用 font 字体

<font class="fa fa-home"></font>

想要找到字体图标的类名，可以百度搜索 font-awesome ,查看文章"Font Awesome,一套绝佳的图标字体库和CSS框架"。

使用路由

下载 npm install vue-router

import VueRouter from 'vue-router';
Vue.use(VueRouter);
var routes = [
	{ path: '/', component: ind },	
	{ path: '/msg', component: msg },	
	{ path: '/hi', component: hi }
]
var router = new VueRouter({ routes, mode:'history' });
new Vue({
	el:"#app",
	router,
	render: h => h(App)
});

<template>
<div>
<router-link to="/">ind</router-link>
<router-link to="/msg">msg</router-link>
<router-link to="/hi">hi</router-link>
<router-view></router-view>
</div>
</template>

导入路由配置文件

import Vue from "vue";
import VueRouter from "vue-router";

注册路由
作用是告诉其他的后代组件，其他的组件可以直接去使用 VueRouter 提供的两个模块 router-link 类似于 a 标签和 router-view

Vue.use(VueRouter);

编写规则
路由规则的配置，所有的路由规则都写在下面，数组的每一个成员，分别代表一个路由规则

const routes = [
    {
       //描述用户访问的是什么页面
        path : "/",
        //描述显示的是什么样的组件
        component : Index //组件需要先引入
    }
]

引入组件

//"../pages/index" 为文件路径
import Index from "../pages/index";
import Goods from "../pages/goods";
import Buycar from "../pages/buycar";
import Mine from "../pages/mine";

创建对象，拿到路由对象的实例

const router= new VueRouter({

})

导出

export default router;

最后要将这个文件引入到 main.js 文件中

//在 main.js 加上
import router from "./router";

// router 加在 Vue 实例对象中
  new Vue({
  router
  el: '#app',
  render: h => h(App)
})

router 测试
页面写到这里，发现点击 footer 下方的按钮,页面并没有发生改变。

这里还需要再 App.vue 页面中做视口的匹配使用 router-link 和 router-view 模块。

<!-- 将a标签改成 router-link -->
  <a href=""><font class="fa fa-user"></font>我的</a>
  <!-- 改 -->
<router-link to="" ><font class="fa fa-user"></font>我的</router-link>

<!-- 将App.vue 页面需要显示的内容使用 router-view 模块显示
将 div 改成 router-view 
 -->
<div class="main">main</div>

<!-- 改后 -->
<router-view  class="main">main</router-view >

改变被点击的首页样式为高亮显示

.router-link-exact-active{
    color:black !important;
}

路由模式：mode
http://localhost:8080/#/ 解决链接多了一个 # 的问题
添加 mode:“history”
mode 有三个值，分别为 history、hash（哈希、网址含#）、abstract（抽象、网址不变）。

const router= new VueRouter({
    routes,
    mode:"history"
})

文件目录
文末，路由还有动态路由匹配、路由参数、编程式导航、命名路由、命名视图（展示多个视图）、全局守卫、路由守卫、组件守卫等相关知识。