03：vue项目初始结构和重要文件讲解

本文主要讲一下用Vue-cli构建好项目后，最初始的文件结构是怎么样的？我们需要由一个最基本的了解，只有了解后才能进行开发。

项目基本目录讲解

以一个目录树状结构进行展示。后边的作用我也写到了下面

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的 html 文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如 logo.pn 就放在这里
---|components       -- Vue 的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在 Vue2 中也有
---|main.ts          -- 入口文件，因为采用了 TypeScript 所以是 ts 结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue 结尾的文件在 ts 中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和 node 版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint 的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归 git 管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用 markdown 语法进行编写
|-tsconfig.json      -- 关于 TypoScript 的配置文件
|-yarn.lock          -- 使用 yarn 后自动生成的文件，由 Yarn 管理，安装 yarn 包时的重要信息存储到 yarn.lock 文件中

这就是基本目录结构和用处了，你可以在表中自查。

package.json 中的三条命令

上两节课你可以使用npm run serve或yarn serve查看项目效果，就是因为有package.json中的scripts起到了作用。先来看一下这三条命令。

{
  //----
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  //----
}

能使用vue-cli-service是因为vue-cli自动安装了cli-service这个工具，此处可以在devDependencies中看出哦。

这三个命令的意思是：

• serve : 在开发时用于查看效果的命令
• build : 打包打码，一般用于生产环境中使用
• lint : 检查代码中的编写规范

我们顺便讲一下package.json中另外两个比较重要的配置项dependencies和devDependencies。这两个都是用来记录安装包信息的，但如果要想完全搞清楚他们的区别，你先要弄清楚什么是开发环境和生产环境。

• 开发环境： 作为一个程序员，每天作的事情都是在开发环境中，编写代码、测试代码、修改 Bug。也就说这些代码没有上线。
• 生产环境：就是代码已经上线，放到了正式的服务器上，公司开始运营去赚钱的代码。

明白了这两个概念后，dependencies下的包是生产环境中必须用到的，当然开发环境也需要。devDependencies是只有开发环境中使用的，上线后这些包就没用了，打包后也不会打包进去的代码。

从 main.ts 文件讲起

项目里边还有一个非常重要的文件main.ts文件，你可以把它叫做入口文件,这里边只有简单的三行代码。

import { createApp } from "vue"; // 引入 vue 文件，并导出`createApp`
import App from "./App.vue"; // 引入自定义组件，你在页面上看的东西基本都在这个组件里

createApp(App).mount("#app"); // 把 App 挂载到#app 节点上，在 public 目录下的 index.html 找节点

顺着这个线索你可以找到App.vue这个组件，打开这个组件，看到里边的内容还是很多的，甚至你可能还有些东西看不明白。

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这个根组件里模板、vue 的 js 业务逻辑代码和 css 代码。在业务逻辑代码中，你可以看到引入了一个HelloWorld.vue的自定义组件。

这个自定义组件里边就是放了一些链接和模板用的 html 代码了，可以试着删除一些 html 代码，然后查看效果。

以上关于03：vue项目初始结构和重要文件讲解的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。