Day 03：观察资料夹

建好专案之後，来看看专案里已经帮你准备好哪些档案吧！先大致认识每个资料夹如何分门别类的规则，日後自己在归档时也会相对有概念，更方便管理档案、组织架构。

根目录层

1. public：主要放置 index.html 等公用资源

2. dist：执行 npm run build 打包之後才会产生的资料夹，所以刚开始不会出现在根目录中

3. src：开发专案主要存放档案的资料夹

4. 配置档们（.browserslistrc、.eslintrc.js、babel.config.js 等）：可依专案需求新增配置档

   • 新增 .prettierrc 自订 Prettier formatter 的设定值

       "printWidth": 100,   // 每行宽度限定字元数（预设 80 字元）
       "singleQuote": true, // 是否使用单引号（预设 false）
     

   • 新增 vue.config.js 设定 webpack 全域引入共享 SCSS 资源

     module.exports = {
       css: {
         loaderOptions: {
           scss: {
             additionalData: `
             @import "@/assets/scss/styles/_color.scss";
             `,
           },
         },
       },
     };
     

5. 专案资讯档们：

   • node_modules：存放安装的所有套件
   • .gitignore：设定 git 忽略追踪的档案规则，呈现灰色，例如 node_modules、/dist 等
   • package.json：记录专案设定、npm 执行指令以及所使用的套件
   • package-lock.json：记录并锁定专案所安装的套件来源及版本

src 主场层（source）

1. assets：存放静态资源，例如 images、css 等
2. components：存放自定义的元件
3. router：存放所设置的路由元件
4. store：存放 Vuex 管理的状态库
5. views：存放显示在画面上的路由元件
   • 将 components 里的元件引入给 views 里的路由元件使用，例如在 Home.vue 中就使用了 HelloWorld.vue 元件

     <script>
     import HelloWorld from "@/components/HelloWorld.vue";
     
     export default {
       name: "Home",
       components: {
         HelloWorld,
       },
     };
     </script>
     

6. App.vue：整个专案里的核心主件，在此进行切换路由元件并渲染出相应页面
   • 以巢状结构来看，App.vue 会是第一层，其他路由元件则会列在第二层之後，因此也可考虑在此层放置所有页面都存有的共通元件作为固定班底，例如 Header、Navbar、Footer 等
7. main.js：程序进入点，完成初始化 Vue instance 并挂载到 App.vue 上
   • 同时会将专案中所需的 plugins 引入至此

依专案规模可在 src 新增其他目录

1. plugins：放置 Vue 相关的插件，例如 BootstrapVue、Vue I18n 等
2. utils：放置通用档案，例如 axios 等

参考资料

• Vue CLI - Passing Options to Pre-Processor Loaders