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

最新推荐文章于 2024-08-10 22:18:52 发布

QAQ_0

最新推荐文章于 2024-08-10 22:18:52 发布

阅读量496

点赞数

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

本文链接：https://blog.csdn.net/qq_37662737/article/details/88749420

版权

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

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

导读
使用 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 "./compone