Vue3出来有一段时间了,作为明年金三银四的招聘旺季,这个绝对是必考项!加油,就是淦~
Vue3 的文档地址: https://v3.vuejs.org/
配置 vue3 开发环境
Vue cli
// 安装或者升级
npm install -g @vue/cli
# OR
yarn global add @vue/cli
// 保证 vue cli 版本在 4.5.0 以上
vue --version
// 创建项目
vue create my-project
然后的步骤
- Please pick a preset - 选择 Manually select features
- Check the features needed for your project - 多选择上 TypeScript,特别注意点空格是选择,点回车是下一步
- Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
- Use class-style component syntax - 输入 n,回车
- Use Babel alongside TypeScript - 输入n,回车
- Pick a linter / formatter config - 直接回车
- Pick additional lint features - 直接回车
- Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
- Save this as a preset for future projects? - 输入n,回车
启动图形化界面创建
vue ui
项目结构和插件
Eslint 插件
如果 eslint 不生效,可以在根目录创建 .vscode 文件夹,然后在文件夹中创建 settings.json 然后输入
{
"eslint.validate": [
"typescript"
]
}
Vetur 插件
Ref
setup 方法
ref 函数
<h1>{
{count}}h1><h1>{
{double}}h1><button @click="increase">+1button>
</template>
import { ref, computed } from "vue"
setup() {
// ref 是一个函数,它接受一个参数,返回的就是一个神奇的 响应式对象 。我们初始化的这个 0 作为参数包裹到这个对象中去,在未来可以检测到改变并作出对应的相应。
const count = ref(0)
const double = computed(() => {
return count.value * 2
})
const increase = () => {
count.value++
}
return {
count,
increase,
double
}
}
Reactive 函数
Reactive 函数
import {computed, reactive, toRefs} from 'vue'
interface DataProps {
count: number;
double: number;