vue 实现初始化
Vue 初始化实现方法
使用 Vue CLI 创建项目
安装 Vue CLI 全局工具后，可以通过命令行快速初始化项目：
npm install -g @vue/cli
vue create project-name选择预设配置或手动选择特性（Babel、Router、Vuex 等），生成的项目结构包含完整的开发环境配置。
手动初始化 Vue 项目
对于简单场景或学习目的，可通过 CDN 引入 Vue 并手动初始化：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return { message: 'Hello Vue!' }
}
}).mount('#app')
</script>单文件组件 (SFC) 初始化
在 Vue CLI 或 Vite 创建的项目中，使用 .vue 文件组织代码：
<template>
<div>{{ greeting }}</div>
</template>
<script>
export default {
data() {
return { greeting: 'Welcome' }
}
}
</script>
<style scoped>
div { color: blue; }
</style>组合式 API 初始化
Vue 3 推荐使用 setup() 语法：
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}插件与全局配置
初始化时可添加全局功能：
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')环境变量配置
在项目根目录创建 .env 文件：
VUE_APP_API_URL=https://api.example.com通过 process.env.VUE_APP_API_URL 访问变量。
