vue3の一番詳しい教え方(1)

基本的な vue3 を見てください

vue3公式サイト>>

プロジェクトを構築する

プロジェクト内の vue3 と vue2 の違いを確認することは良い選択です。

vue3 + webpack ビルド プロジェクト

vue3 + webpack を使用してプロジェクトをビルドしたい場合は、この記事でプロジェクトを作成するときにvue3 を選択し、ここをクリックして >>

vue3 + vite + Element Plus で完全なプロジェクトを構築

• 1 プロジェクト my-vue-app を作成します プロジェクト名は中国語を使用できない疑いがあります

npm init vite@latest my-vue-app --template vue

図に示すように:

• 2 プロンプトに従って my-vue-app フォルダーに入ります

cd my-vue-app

• 3 my-vue-app を初期化する

npm install

• 4 my-vue-app プロジェクトを開始します

npm run dev

これにより、vue3 プロジェクトが完全に作成され、開始されます。

完璧なプロジェクト

完璧なルーティング

npm install vue-router@next -S // 安装最新路由
- 路由文件(router/index.js)
 import {
    
    createRouter, createWebHashHistory} from 'vue-router'

  export default createRouter({
    
    
    history: createWebHashHistory(),
    routes: []
  })
 // todo: 挂载在 下面 main.js 文件中

完全なvuex

npm i vuex@next -S  //  安装最新vuex
- vuex(store/index.js) 文件
  // vue3中创建store实例对象的方法createStore()按需引入
  import {
    
     createStore } from 'vuex'
  
  export default createStore({
    
    
    state: {
    
    
    },
    mutations: {
    
    
    },
    actions: {
    
    
    },
    getters: {
    
    
    },
    modules: {
    
    
    }
  })
  

 // todo: 挂载在 下面 main.js 文件中

コンプリートエレメントプラス

npm install element-plus --save

main.jsのマウントを改善する

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入 路由
import store from './store' // 导入 vuex

import ElementPlus from 'element-plus' // 导入Element Plus 
import '../node_modules/element-plus/theme-chalk/index.css' // 导入Element Plus css
// import 'element-plus/theme-chalk/index.css' // 导入Element Plus css
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

プロジェクトのビルドが完了しました

このようにして、完全な vue3 + vite + 要素に加えてプロジェクトが構築されます

vue3 demo

建てる

vue3 + vite のデモ クリックして
デモを入手します はじめに: これは vue3 + vite の管理バックグラウンド デモです。この機能は、ウィンドウのサイズに応じてビューのスケーリングを変更することです。特定の機能: たとえば、ウィンドウの幅が 750 ピクセルより小さい場合、ウィンドウが縮小し続けるのと同じ比率でコンテンツが縮小されます。適応効果を達成します。（例えば、PC側管理システムを携帯電話上で動作させた場合、携帯電話画面の計算比率に応じて内容が表示されます。混同しないようにしてください。）750pxを超えるウィンドウの内容は変更されません（PC側の運用管理システムの表示など）。適用対象：PC側のコード一式はモバイルブラウザに対応しており、レスポンシブにレイアウトを変更できます。

Webパックビルド

vue3 + webpack の管理バックグラウンド デモ クリックして
デモを取得します はじめに: vue3 + webpack バックグラウンド初期化テンプレート -- 完全なプロジェクト環境を構築する、非常に簡潔かつ明確で、非常に使いやすいバックグラウンド テンプレートです。pull 後、npm install が起動します。エラーがある場合は、フィードバックをお願いします。

記事の終わり

証言

辛抱強く読んでいただきありがとうございます。不備があれば、修正していただければ幸いです。
共通の目標を持つために、私たちはヴューの長い川を一緒に旅していきます。
皆さんの一歩一歩をお祈りしています。