Vue前端框架（一）——Vue的开始

一、项目创建以及运行：

一、创建项目

npm init vue@latest

二、安装依赖

npm install

三、运行项目

npm run dev

四、开发环境

VSCode+Vue Language Features (Volar) 

二、项目目录结构

.vscode	vsCode工具的配置文件
node_modules	vue项目的运行依赖文件
public	资源文件夹（浏览器图标）
src	源码文件夹
.gitignore	git忽略文件
index.html	入口HTML文件
package.json	信息描述文件
README.md	注释文件
vite.config.js	vue配置文件

三、Vue应用（Vue是从哪开始的）

注意：浏览器可执行文件只有HTML、CSS、JavaScript和Image。

Vue使用的是构建工具vite，经常使用的构建工具还有Webpack。

所有的Vue文件其实都是index.html中的script标签导入的main.js文件。

应用实例

每个Vue应用都是通过createApp函数创建一个新的应用实例。

main.js

import { createApp } from 'vue'
import App from './App.vue'

//app:Vue的实例对象
//在一个Vue项目中，有且只有一个Vue的实例对象
const app = createApp(App)
//App：根组件
app.mount('#app')

根组件

传入createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

挂载应用

应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串。

app.mount('#app')
//#app对应index.html中的div标签的id属性

公共资源

在src目录下的assets文件夹的作用就是存放公共资源，例如：图片、公共css或者字体图标等。