vue3基础
创建vue3工程
# vue2基于CLI脚手架创建项目,vue3基于vite创建,更加高效
npm create vue@latest
# 选择需要的功能
# 输入项目名[project_name]
cd [project_name]
# 尽量使用npm命令,迫不得以再使用cnpm等国内源
npm install
npm run dev
# 复制Local链接打开即可
项目结构分析
1…vscode文件夹->开发工具配置文件夹
2.node_modules文件夹->项目依赖包
3.public文件夹->公共资源文件夹
4.src文件夹->项目源码文件夹
5…gitignore文件->git忽略文件
6.index.html文件->项目入口文件
7.package.json文件->项目配置(信息描述)文件(其中的vite是与webpack类似的脚手架,可以快速搭建项目)
vite.config.js文件->Vue配置文件
缺少node_modules报红
执行npm i
安装项目需要的依赖解决
编写基础代码
index.html入口
main.js
// 容器
import {createApp} from 'vue'
// 根组件
import App from "./App.vue"
// 创建实例
const app = createApp(App)
// 挂载对象
app.mount("#app")
App.vue
<template>
<div class="hello">
hello world!
<Component/>
</div>
</template>
<script>
import Component from "./components/component.vue"
exports default{
// 注意此处为vue2选项式写法
name:"App",
data(){
},
methods:{
}
}
</script>
<style>
.hello {
}
</style>
文件夹components→Component.vue
<template>
<div class="intro">
my name is lucy
</div>
</template>
<script>
exports default{
// 注意此处为vue2选项式写法
name:"Component",
data(){
},
methods:{
}
}
</script>
<style>
.intro {
}
</style>
vue3组合式写法
<!-- vue2 -->
<template>
<div class="hello">
{{ msg }}
<button @click="sayHello">打招呼</button>
<intro/>
</div>
</template>
<script>
import intro from './components/intro.vue';
export default {
name: 'App',
// components注册组件
components: {
intro
},
setup(){
// 当前变量为非响应式
let msg = 'hello vue3';
function sayHello(){
alert('hello vue3');
}
/**
* 相当于
return {
msg:msg,
sayHello:sayHello
}
*/
return {
msg,
sayHello
}
}
}
</script>
<!-- scoped单文件生效 -->
<style scoped>
.hello {
width: 100%;
height: 500px;
background-color: #f9f;
border-radius: 10px;
box-shadow: 3px 5px 2px 2px rgba(0, 0, 0, .6);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
注意点
-
vue2写法和vue3写法可以共存
-
vue3的setup()不能使用this获得当前vue对象
-
vue3的setup()函数比生命钩子函数beforeCreate()先执行
-
vue2的选项式可以使用setup()函数中的成员,直接使用this调用
想来应该是执行完返回值交给了vue对象,并不是说能和data中的数据、methods中的函数并列
5.vue3的setup()不能使用选项式中的对象
setup()语法糖
<script>
import intro from './components/intro.vue';
export default {
name: 'App',
// components注册组件
components: {
intro
}
}
</script>
<!-- 多加一个script但省去了setup()函数的声明和繁琐的值返回 -->
<script setup>
// 当前变量为非响应式
let msg = 'hello vue3';
function sayHello(){
alert('hello vue3');
}
</script>
借助插件还可以合并为一个script
步骤如下
终端执行npm i vite-plugin-vue-setup-extend -D
找到vite.config.js先引入插件,再在plugins中调用即可
import vueSetupExtend from 'vite-plugin-vue-setup-extend
plugins: [
vue(),
vueSetupExtend()
]
<script setup name="App030">
import intro from './components/intro.vue';
components: {
intro
}
// 当前变量为非响应式
let msg = 'hello vue3';
function sayHello(){
alert('hello vue3');
}
</script>