Vue3 入门

一、介绍

• Vue 是一套用户构建用户界面的渐进式框架
• 官网：https://cn.vuejs.org
• 需要有 npm、webpack 基础，会 javascript 的 ES6 语法，有异步网络请求 axios 基础
• Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
• Vue 的两大核心
  • 响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心 dom 操作，而专心数据操作
  • 可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

---

二、安装方法

1、cdn 安装

• 对于生产环境，链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
• BootCDN：https://www.bootcdn.cn

<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.cjs.js"></script>

• 示例

<!-- 1、挂载html标签的id上 -->
<div id="app">{{title}}</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
            title: "我是欧阳克",
            };
        },
    }).mount("#app");
    // 可以用app变量访问标题
    console.log(app.title);
</script>

<!-- 2、执行方法 -->
<div id="app">{{title}} {{one()}}</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                title: "我是欧阳克"
            };
        },
        methods: {
            one() {
                console.log(this.title);
                return "我是one方法";
            }
        },
    }).mount("#app");

    console.log(app.title);
    console.log(app.one());
</script>

2、下载并自托管

3、npm 命令行安装

• npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用

npm install vue@next

4、Vue cli 安装

• 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)
• 官网：https://cli.vuejs.org/zh/

5、Vite 安装

• 下一代的前端工具链，是一种新型前端构建工具，能够显著提升前端开发体验。
• 官网：https://cn.vitejs.dev/