【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+elementui vue3+js+vue-router+pinia+elementui-plus # 4 变化 新的生命周期钩子 data 选项应始终被声明为一个函数 移除keyCode支持作为 v-on 的修饰符