vue3前端青铜到黄金王者 #12 项目结构解析

前篇我们建立一个vue3项目，大概展示了一下。

其实可以修改，我们再深度看看。

v 项目结构是什么？

vue cli架起vue项目如下：

./README.md

./yarn.lock

./public

./public/favicon.ico

./public/index.html

./babel.config.js

./package.json

./src

./src/App.vue

./src/main.js

./src/components

./src/components/HelloWorld.vue

./src/assets

./src/assets/logo.png

这里重点及以上package.json.

分成public 和 src来看。

pubilc 内为静态页面。
src 内为vue的一些组件代码。

package.json 解析

除了项目通用的属性，下面我们需要重点看的就是scripts和dependencies。

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

  "dependencies": {

    "core-js": "^3.6.5",

    "vue": "^3.0.0"

  },

\

dependencies

这个比较直观，依赖了core-js库和vue js库。

这里说3.x版本的。

scripts解析

这里了有三个。

lint 这个执行代码格式化。

build 进行项目构建编译

serve 把项目渲染服务端跑起来。

接下来是public目录

这个主要是放置网站的首页的，比如需要定制标题可以修改这个。

还有网站的小图标。

然后就是最重点的vue 源码目录 - src

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="Welcome to Your Vue.js App"/>

</template>

\


<script>

import HelloWorld from './components/HelloWorld.vue'

\


export default {

  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>

我们可以看到整个App.vue页面代码分为里三块。

template块

组件的模板，可以引用其他组件标签。

script块

vue组件的实现代码，这里引入了HelloWorld组件。

style块

声明页面组件的样式。

讲完整个项目结构，我们改一下组件代码，运行一下。

比如修改上面的App.vue

修改，欢迎信息为中文：欢迎参与开发第一个Vue.js App

重新编译运行

$ yarn serve

运行效果如下，看的项目了。

总结

vue3的项目比较直观，目录编排很清晰，比较好上手！

今天就写到这里。

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢