前言：我也是個新手，學習Vue，可是正處於Vue3與Vue2之間的時期，目前網上Vue3的教程比較缺乏（語法有革新並且不向下兼容），連最基本的語法教學也只能從Vue2官網舊教程學，可是最基本的HelloWorld都不知道從何寫起，理解了很多，方便初學者能夠從代碼理解，因此就分享一下，比較笨拙，希望大蝦莫拍磚！
一、初級HelloWorld
1.下載Vue3
新建項目目錄，瀏覽器打開https://unpkg.com/vue@next，複製全部代碼，粘貼到新建的文件vue.js中
2.編寫HTML文件
新建index.html，編輯如下代碼即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測試</title>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script> //調用vue，指定腳本文件
</head>
<body>
<div id="app">
{{ counter }}
</div>
<script>
const App = {
data() {
return {
counter: "Hello World!"
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
二、進階--組件綁定
編輯html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index4</title>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input v-model="value"/>
<p>雙向綁定：{{value}}</p>
<hello-comp person-name="張三"/>
</div>
<script>
const helloComp = {
name: 'hello-comp',
props: {
personName: {
type: String,
default: 'wangcong'
}
},
template: '<p>hello {{ personName }}!</p>'
}
const app = {
data() {
return {
value: '',
info: {
name: 'tom',
age: 18
}
}
},
components: {
'hello-comp': helloComp
},
mounted() {
console.log(this.value, this.info)
},
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
三、項目示例
1.新建項目
vue create kk
選擇手動
選擇插件
(*) Choose Vue version：選擇 Vue 版本
(*)Babel：支持使用Babel編譯器
( )TypeScript：支持使用 TypeScript 書寫源碼
( )Progressive Web App (PWA) Support：支持PWA
(*) Router：支持 vue-router
(*)Vuex：支持 vuex
(*)CSS Pre-processors：支持 CSS 預處理器
(*)Linter / Formatter：支持代碼風格檢查和格式化
( )Unit Testing：支持單元測試
( )E2E Testing： 支持 E2E 測試
選擇版本
是否使用 history 路由模式
選擇CSS預處理器
Sass/SCSS分兩種：
node-sass：是用 node(調用 cpp 編寫的 libsass)來編譯 sass，是自動編譯實時的
dart-sass：是用 drat VM 來編譯 sass，需要保存後纔會生效
格式檢查選擇
ESLint with error prevention only：只進行報錯提醒；
ESLint + Airbnb config：Airbnb配置，不嚴謹模式；
ESLint + Standard config：標準配置，正常模式；
ESLint + Prettier：嚴格模式；
TSlint：typescript格式驗證工具
選擇什麼時候執行 eslint 校驗
Lint on save：保存時檢查
Lint and fix on commit：提交時檢查
配置文件存放的位置
In dedicated config files：在專用的配置文件中單獨存放
In package.json：存放在 package.json 中
保存之前的配置項
安裝過程
狀態顯示
運行項目
cd kk
npm run serve
2.新建頁面視圖
在/src/views目錄新建頁面文件Test.vue
<template>
<div class="test">
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name:"test",
setup(msg) {
console.log(msg);
return { message:"Hello World!" };
},
};
</script>
<style scoped>
</style>
************Vue3版本推薦setup用法，因此改用這個做項目測試************************
3.添加主頁入口鏈接
編輯/src/App.vue，新增<router-link to="/test">Test</router-link>，還有上一行末尾的“|”（英文字符）
注意：這個符號要小心，需要多次切換，我未知原因，需要改幾次才能運行成功
4.添加路由配置
編輯/src/router/index.js，添加以下行
{
path: '/test',
name: 'Test',
component: () => import('../views/Test.vue')
},
5.運行項目
其他待補充
Reference:
https://www.cnblogs.com/Happy-Lu/p/13162282.html
https://www.cnblogs.com/blog-cxj2017522/p/8562536.html
https://blog.csdn.net/qq_40247570/article/details/119277229
https://www.cnblogs.com/xiaonian8/p/14019350.html
https://v3.cn.vuejs.org/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
https://www.jianshu.com/p/d2fa67f42b3c
https://blog.csdn.net/qq_41974199/article/details/119755606
https://www.jianshu.com/p/2f587f2b47de \\Vue2和Vue3區別\\
https://www.cnblogs.com/bingcola/p/15183667.html \\最全面的講解新建項目的配置模式