前言：我也是个新手，学习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 \\最全面的讲解新建项目的配置模式