vue项目的2和3版本在语法方面上有很大的不同，本次由vite的构建工具搭建的项目默认是vue3项目，各种语法和操作也是按照vue3的风格来的。

vue项目结构

public：存放项目的静态资源，
node_modules：存放npm安装的依赖库，
src：项目开发的主要文件夹
		assets：存放图片和静态文件，
		components：存放组件，
		router：存放路由跳转的js文件
		views：存放界面组件，
		App.vue：根组件
		main.js：入口文件
index.html：首页入口文件
package.json：项目配置和包管理文件
vite.config.js：存放项目的配置信息

vue选项式API

选项式API写法较为固定，上手较快，熟悉后比较简单。

在选项式API中，数据和方法都有规定的位置，方法的调用则是使用vue框架中的生命周期钩子，选择在不同的生命周期做不同的事情，同时设定当页面中的数据发生变化后，要进行什么样的操作，基本可以覆盖程序执行的各个位置。

简单写法示例：

<script>
import { getStudentList } from "../api/request"
// 默认导出
export default{
	// 数据存放位置
  data: () => ({
    studentList: [],
  }),
	// 方法存放位置
  methods:{
    getStudentData(){
      getStudentList().then(res=>{
      this.studentList = res.data;
      console.log(this.studentList);
    });
    }
    
  },
	// 生命周期钩子：组件实例化后调用
  created(){
    this.getStudentData();
  }
}
  </script>

vue的生命周期钩子

vue选项式写法：生命周期选项 | Vue.js (vuejs.org)

vue组合式写法：组合式 API：生命周期钩子 | Vue.js (vuejs.org)

vue项目特点

在vue项目中的<script>标签中可以使用原生js，但整体风格偏向于vue项目本身的编写风格。

在单页面应用中，所有的模板都是在一个页面中生效的。

vue项目技巧

• vue项目下拉菜单的实现：

  使用了<select>标签和<option>标签以及v-model双向表格绑定来实现。

  const selectbook = ref('')   // 用于接收下拉列表的选中的值
  
  <select id="bid"  v-model="selectbook">  // 通过v-model使元素与变量建立双向绑定关系
              <option v-for="option in bookz" :value="option.bid"> // 设置变量接收的值
              {{ option.title }} // 显示下拉列表展示的文本
  			      </option>
  </select>
  

• vue项目部署-vite工具部署

  • 网站根路径的设置：

    // 在 vite.config.js 文件
    export default defineConfig({
      base:"./",  // 引入路径相当于webpack中的baseUrl 或 publicPath
    })