VUE脚手架和创建文件

vue3是组合式开发什么是组合式？

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

• 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

• 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

• 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

脚手架项目创建好后项目目录中是没有vue.config.js文件的，此时需要我们在项目的根目录下手动创建vue.config.js

1.vue.config.js基础配置代码

module.exports = {
    publicPath: "./", // 公共路径 默认为"/"，建议使用"./"相对路径
    devServer: {   // 本地服务器配置(npm run serve)
      port: 8080, // 端口
      host: "localhost", // 域名
      https: false, // 是否开启https
      open: true	// 是否在开启服务器后自动打开浏览器访问该服务器
    },
    lintOnSave: false,  // 取消lint语法检测，此处可不配置
    outputDir:"dist", // build打包输出目录
    assetsDir:"assets", // 静态文件输出目录，基于dist
    indexPath: "index.html",  // 输出html文件名
    productionSourceMap: false, // 取消.map文件的打包，加快打包速度
    configureWebpack: (config) => {
      // process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
      if (process.env.NODE_ENV !== 'production') return;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;	//生产环境去掉console.log
      return {  // 此处配置webpack.config.js的相关配置
        plugins: [],
        performance: {}
      };
    }
};

2.devServer——本地服务器配置

devServer: {   // 本地服务器配置(npm run serve)
  port: 8080, // 端口
  host: "localhost", // 域名
  https: false, // 是否开启https
  open: true	// 是否在开启服务器后自动打开浏览器访问该服务器
},

3.lintOnSave——lint语法检测

lintOnSave: false,//不检查语法

刚创建的工程vue文件代码会是白色的，通过vetur插件解决

创建vue文件

setup的使用：

setup 用来写组合式 api，执行之后，setup 打印结果始终在前边。代替了data（参数），methods（方法），统统可以写在setup里面

使用 ref 创建响应式数据

<template>
  <h1>姓名：{{ name }}</h1>
  <h1>年龄：{{ age }}</h1>
  <button @click="syeHello">变换</button>
</template>
<script>
import { h } from "vue";
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    //定义变量
    let name = ref("张三");
    let age = ref(14);
    //方法
    function syeHello() {
      name.value = "小蛋";
      age.value = 32;
    }
    return {
      name,
      age,
      syeHello,
    };
   
  },
};
</script>

reactive

• reactive的参数必须是一个对象，包括json数据和数组都可以，否则不具有响应式
• 如果给reactive传递了其他对象（如时间对象），默认情况下修改对象界面不会自动更新，如果想更新，可以通过给对象重新赋值来解决