在实际开发中,我们都是通过脚手架创建vue项目的。
默认安装了node,yarn,
1创建项目:
yarn create vue
为了学习,我们选择最简单的培训,一路下来都选no
2 创建项目以后,只是搭起了架子,需要再安装依赖,直接 yarn
即可安装依赖。
3 运行 项目:
yarn dev
目录分析
1 public: 存放静态资源目录。打包以后会直接放在dist目录中,一般都是图标,基本的样式。
2 src 下面存放的是我们开发的源代码文件。
main.js 解析:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
1 app.vue是根组件,createApp是将根组件关联到应用上。
一个项目应用上只能挂载一个跟组件。
createApp会返回一个应用实例,可以理解为代表整个项目。
2 mount(‘#app’)
将应用实例挂载到网页上。它会返回一个根组件实例。也会把#app元素里面的内容替换。
这个返回的组件实例,是一个proxy对象。
app.vue解析
vue中的组件,本质上是一个js对象。
data是这个对象中的方法。
data会返回一个对象作为返回值,vue会对该对象进行代理,从而将其装换为响应式数据,响应式数据可以通过组件实例进行访问
注意:
直接向组件实例中添加的属性不会被代理,所以所有的属性都应该放在data函数中。