【1.0】vue3的创建
【1.0】vue3的创建
【一】vue3介绍
-
vue2的所有东西,vue3都兼容
-
vue3中写js代码由两种,组合式和配置项
-
配置项api,就是vue2的写法,将数据放进data,方法放进methods等
export default{data(){return {}},methods:{}}
-
组合式,就是一个功能,上面直接写变量,下一行可以直接写函数,但是得return返回出去
const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) function add(){ }
-
【二】vue3项目创建
-
#1 什么是vite?—— 新一代前端构建工具。 优势如下: 开发环境中,无需打包操作,可快速的冷启动。 轻量快速的热重载(HMR)。 真正的按需编译,不再等待整个应用编译完成。# 2 兼容性注意 Vite 需要 Node.js 版本 18+,20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本 官网:https://cn.vitejs.dev/
-
vue-cli创建和vue2基本一致
(1)vue-cli创建
【1】cmd命令,“D:”+enter进入d盘或者输入vue ui进入网页创建
【2】创建项目
-
vue create vue3_0815(项目名)
【3】选配置
-
mannly自定义 router/vuex/babel/选中 版本3.x history版本
(2)vue-vite创建(推荐)
【1】点进官网
-
https://cn.vitejs.dev/
【2】配置镜像站
-
cmd查看本地镜像
npm config get registry
-
配置淘宝的镜像站
npm config set registry https://registry.npmmirror.com
【3】创建项目
-
# 创建项目方式一(后期还是要输入project_name)npm create vite@latest# 创建项目方式二:指定名字npm create vite@latest vue3_demo002# 创建项目方式三cnpm create vite@latest vue3_demo002# 创建项目方式四cnpm create vite vue3_demo002
回车 选择vue,下一步选择js
【4】打开
-
用pycharm打开
右上角 edit_configurations 加号npm --在script中输入serve(vue-cli) --在script中输入dev(vue-vite)
-
我在npm run dev报错,是因为没有install vue点击那个感叹号提示自动下载的
【5】补充
-
vue-cli和vite区别在页面上,命令一个是serve一个是dex,都可以在package.json中修改
-
{"name": "vue3_vite0815","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite",---可以是script,此时就是run serve"build": "vite build","preview": "vite preview"},
【三】快速体验组合式
-
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style></style> </head> <body> <div id="app"><p>{{count}}</p><br><button @click="handleAdd">点我加1</button></div> </body> <script>let app=Vue.createApp({setup() {let count=Vue.ref(0)let handleAdd=()=>{count.value++}return {count,handleAdd}},})app.mount("#app")</script> </html>
【四】快速体验配置项
-
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style></style> </head> <body> <div id="app"><p>{{count}}</p><br><button @click="handleAdd">点我加1</button></div> </body> <script>let app=Vue.createApp({data(){return {count:100}},methods:{handleAdd(){this.count++}}})app.mount("#app")</script> </html>
【五】拥抱ts
-
# 1 之前写vue2用js # 2 vue3-->ts-->微软推出的--》最终要被编译成js才能运行在浏览器中-使用ts写,可以避免很大错误-ts是js的超集---》ts完全兼容js# 3 我们学的是vue2+js+vue-router+vuex+elementuivue3+js+vue-router+pinia+elementui-plus# 4 变化新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符