vite+vue3 基盤

vite プロジェクト作成コマンド

npm create vite@latest .

プロジェクトの作成では vue を選択します。

依存関係を作成後にインストールする

npm i || cnpm i

vite プロジェクトの下にファイルをインポートするには、@ パスを構成する必要があります

//如果文件路径 ./
//如果文件层较深配置@ “@/***”===“../../”

vite で @ パスを構成します (js バージョンはノードグローバル変数をサポートしますが、ts バージョンは @types /node をサポートしません)

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//引入path模块
import path from "path";

//创建一个文件读取方法
function resolve(url) {
return path.resolve(__dirname, url);
}
// https://vitejs.dev/config/
export default defineConfig({
//配置@别名
resolve: {
alias: {
"@": resolve("./src"),
"@network": resolve("./src/network"),
"@utils": resolve("./src/utils"),
},
},
plugins: [vue()],
});

ファイル変更プレフィックスの導入

import App from "@/App.vue";

構成エイリアスパスは @ でマークされます。

vue3プロジェクトでUIライブラリを使用する

element plus

公式ウェブサイト

https://element-plus.org/zh-CN/
基于 Vue 3，面向设计师和开发者的组件库

インストール

cnpm i --save-dev element-plus

vue3 プロジェクトで ui を使用する

すべてインポートする
オンデマンドでインポート (推奨)

自动导入
npm install -D unplugin-vue-components unplugin-auto-import

vite.config.js ファイルを変更する

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//引入path模块
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
//创建一个文件读取方法
function resolve(url) {
return path.resolve(__dirname, url);
}
// https://vitejs.dev/config/
export default defineConfig({
//配置@别名
resolve: {
alias: {
"@": resolve("./src"),
"@network": resolve("./src/network"),
"@utils": resolve("./src/utils"),
},
},
plugins: [
vue(),
//实现组件按需
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
});

テスト要素と vue3 プロジェクトコンポーネント

ビュー3

中国の公式サイト

https://cn.vuejs.org/
vue3 向下兼容 vue2的写法用法

vite によって作成された Vue3 プロジェクト構造

项目结构基本一致

项目中的核心入口文件不一致
//createApp 来创建vue实例
import { createApp } from "vue";
//引入全局css
import "./style.css";
//引入根组件
import App from "./App.vue";

//createApp 参数为渲染的根组件
//mount("#app") 渲染完成之后挂载的根节点
let app = createApp(App);
console.log(app);
app.mount("#app");

vue3でプロジェクトをビルドする

vue3核心
数据驱动+组件化构建

数据驱动：已数据驱动组件试图更新
组件化 由多个组件构成复杂业务。

コンポーネント化

コンポーネントを使用すると、UI を独立した再利用可能な部分に分割し、各部分を個別に考えることができます。実際のアプリケーションでは、コンポーネントは多くの場合、ネストされたツリー構造に編成されます。

Vue3のコンポーネント構成

script + template + style 三个模块构成组件

vue3 template 和 vue2template 区别
v3支持多个html片段
v2支持单个html片段

v3 script 和 v2 script也存在区别。

v3 setUp周期 来写
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>

v3支持v2组件式写法

v2是组件时代码写法
export default {
name:"",
data(){
return {}
}
}

v3组件和v2组件比较
v3组件较v2组件简单 容易书写

v3 コンポーネントと v2 コンポーネントスタイル

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
//v3新增组合式 API
setup() {},
mounted() {},
methods: {},
};
</script>
简化
<script setup>
//组件免注册
import HelloWorld from "./components/HelloWorld.vue";
</script>

ログインコンポーネントを定義する

<script>
export default {};
</script>
<template>
<div>login</div>
</template>

<style scoped></style>

アプリコンポーネントにログインコンポーネントを表示するには、登録を導入する必要があります

在App组件中 引入 注册 挂载
//v2组件结v3 setup写法 必须注册
<script>
import Login from "./views/login.vue";
export default {
name: "App",
components: {
Login,
},
setup(){

},
mounted() {},
methods: {},
};
</script>

挂载
<Login></Login>

//直接使用v3的组件式写法
<script setup>
import Login from "./views/login.vue";
</script>

<template>
<div>根组件</div>
<Login></Login>
</template>

<style scoped></style>

API スタイルを組み合わせた v3 コンポーネントセットアップの利点:

コンポーネントでデータ駆動型を使用する

vue3中的常用指令：
v-model 绑定表单元素的值
v-on 绑定事件 简写@ 和v2一致具有访问修饰父 例如：.prevent

<script>
export default {
name: "Login",
data() {
return {
formData: {
name: "",
},
};
},
methods: {
submitForm() {
console.log(this.formData);
},
},
};
</script>
<template>
<div class="login-page">
<div class="login-form">
<form @submit.prevent="submitForm">
<ul>
<li>姓名：<input v-model="formData.name" type="text" /></li>
<li><button>注册</button></li>
</ul>
</form>
</div>
</div>
</template>

v2 コンポーネントの記述方法を短縮されたセットアップ方法に変更します。

構成 API: setup()

setup() 钩子是在组件中使用组合式 API 的入口

セットアップフック関数はどのくらいの期間実行されますか。

セットアップの使用法:

1.this指向
setup() {
//this指向
console.log(this); //undefined
},
2.setup 钩子函数 必带返回（非简写）
<script>
export default {
name: "Login",
setup() {
//this指向
console.log(this); //undefined
return {
num: 1,
};
},
mounted() {
//setup返回的数据 绑定到this当前组件实例
console.log(this.num);
},
};
//因为setup返回值绑定给当前组件实例 所以可以在组件模板上直接使用
<input type="text" v-model="num" />

带返回值的setup中写业务操作代码

<script>
export default {
name: "Login",
setup() {
//定义数据源
let name = "";
//表单提交方法
let submitInfo = () => {
console.log("表单提交", name);
};

return {
name,
submitInfo,
};
},
};
//模板中使用v-model绑定name绑定 修改 没有修改到setup中定义的name变量 原因是name变量为普通的变量。

セットアップエントリー機能ではv3新機能組み合わせAPIを使用して操作します。

1.ref 定义响应式变量

内部値を受け取り、その内部値を指すプロパティが 1 つだけある、リアクティブで変更可能な ref オブジェクトを返します。 .value

<script>
//引入组合式api
import { ref } from "vue";
export default {
name: "Login",
setup() {
//定义数据源
//ref 用来定义单变量
let name = ref("");
//表单提交方法
let submitInfo = () => {
console.log("表单提交", name.value);
};

return {
name,
submitInfo,
};
},
};
</script>
//修改为v3简写方式

<script setup>
//引入组合式api
import { ref } from "vue";

//定义数据源
//ref 用来定义单变量
let name = ref("");
//表单提交方法
let submitInfo = () => {
console.log("表单提交", name.value);
};
</script>