项目开发的一些初始化工作

原创已于 2022-05-09 21:30:10 修改 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #css

于 2022-05-09 21:28:42 首次发布

Vue学习专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Vue项目的目录结构设置，包括CSS初始化和文件夹别名配置。首先，通过引入normalize.css来统一浏览器样式，然后在base.css中定制基本样式，并在App.vue中引用。接着，展示了在vue.config.js中配置Webpack的文件夹别名，简化路径引用，如将'@'映射到'src'文件夹，方便引入资源。这些步骤有助于提升项目的规范性和开发效率。

一、目录划分

二、CSS 初始化

三、配置文件夹别名

一、目录划分

二、CSS 初始化

新建 css 文件 normalize.css，GitHub 上搜索并下载下来：

在 base.css 文件中引入 normalize.css 文件并配置一些基本样式，然后在 App.vue 文件中引入：

@import "./assets/css/base.css";

三、配置文件夹别名

在 vue.config.js 文件中添加以下代码：

module.exports = {
  configureWebpack:{
    resolve:{
      alias:{ //配置别名 默认 @ 为 src 文件目录
        'assets':'@/assets',
        'common':'@/common',
        'components':'@/components',
        'network':'@/network',
        'view':'@/view',
      }
    }
  }
}

则上面引入 base.css 文件时可以使用：