前篇我们建立一个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的项目比较直观，目录编排很清晰，比较好上手！
今天就写到这里。
我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢
