【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 的修饰符