• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Vue3 入门

Data: 2017-05-05 08:12:12Form: JournalClick: 9

# Vue3 入门

# 一、介绍

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

# 二、安装方法

# 1、cdn 安装

  • 对于生产环境,链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏
  • BootCDN:https://www.bootcdn.cnopen in new window
<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 能很好地和诸如 webpackRollup 模块打包器配合使用
npm install vue@next

# 4、Vue cli 安装

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

# 5、Vite 安装

  • 下一代的前端工具链,是一种新型前端构建工具,能够显著提升前端开发体验。
  • 官网:https://cn.vitejs.dev/open in new window
Name:
<提交>