用vite创建vue3单页面程序

我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

npm create vue@latest

 再执行这三行

cd <your-project-name>
npm install
npm run dev 

生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API 。

组合式 API (Composition API)​

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

选项式 API (Options API)​

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

两者对比 

代码 

其中app.vue是项目的根组件，相当于网站的首页，该组件的实例将挂载到index.html页面中，在根组件中使用路由完成页面的展示与跳转，其代码结构如下所示 

<template>  
    <div id="app">  
        <img src="./assets/logo.png">  
        <router-view />  
    </div>  
</template>  
  
<script>  
    export default {  
        name: 'App'  
    }  
</script>

Main.js文件是应用入口函数，类似c语言的main函数，主要任务是引入全局使用的插件、组件、模块库、样式等，将根组件挂载到页面的某一个dom结点上。在项目启动时，首先加载此文件，创建根组件实例，其代码如下所示。 

//引入组件或js插件或文件
import { createApp } from 'vue'    //引入createApp函数，用于创建vue实例
import App from './App.vue'    //引入根结点组件，定义其名称为“App”
// import router from './router'  //引入路由
// import { createPinia } from 'pinia'  //引入状态管理组件函数
  
 const app = createApp(App)  //创建vue实例

/* app.use(组件)语句，在此定义后，可以在这个vue项目任意地方使用该组件*/
// app.use(router)
// app.use(createPinia())
app.mount('#app')

编写简单的单页面应用程序 

打开app.vue文件，在此文件中编写欢迎信息，示例代码如下所示。 

<template>   //模板语言
  <div id="app">  
    <h1>{{msg}}</h1>  
  </div>  
</template>  
  
<script>  
  export default {  
    name: 'helloWorld',  
    data() {  
        return {     //vue组件中的数据
            msg: '欢迎学习vue单页面开发'  
        }  
    }  
  }  
</script>  
  
<style scoped="scoped">   //定义该组件的样式
  #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是单页面程序中的根组件，职责是与外壳页面建立联系和页面导航，不承担具体的业务功能，业务功能通常写在子组件中。编写一个名为HelloWorld的组件，它是App.vue的子组件，根据输入的姓名，展示“欢迎学习vue，winkle”，代码如下所示 

<template>  
  <div>  
    <h1>{{ msg }},{{userName.toUpperCase()}}!</h1>  
    <label>姓名：<input type="text" v-model="userName" placeholder="请输入用户姓名" /></label>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'HelloWorld',  
  data () {  
    return {  
      msg: '欢迎学习Vue',  
      userName: 'winkle'  
    }  
  }  
}  
</script>  
  
<style scoped>  
  h1{  
    font-weight: normal;  
  }  
</style>

修改app.vue文件中模板文件，引入组件HelloWorld，代码如下所示 

<template>  
  <div id="app">  
     <hello-world></hello-world>  
  </div>  
</template>     
<script>
import HelloWorld from '@/components/HelloWorld.vue'   
 export default {  
  name: 'App',
  components: {  
          HelloWorld: HelloWorld  
       } 
}
</script>

 在vite.config.ts文件里的代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': 'C:\\Users\\27743\\vite-demo\\src' // 确保这个路径正确指向您的 src 目录
    }
  }
})