使用vue3+ts+vuex+axios 撸了一个官网

1607775724144.jpg
大概这样的简单官网,没有考虑ssr,接下来咱们进入正题~正式搭建。
1607776145653.jpg

确定你的电脑有木有vue的环境~vue create "your project"
1607777410542.jpg

Manually select features~手动选择功能安装
1607777598318.jpg
loading~
1607778533807.jpg
Choose a version of Vue.js 选择 3.x
Use class-style component syntax 我选择的no,如果安装的话可以 class的模式写vue组件,有兴趣的同学可以安装看看。
Use history mode for router? 我选择的hash
其余的可以按照我的选择
1607778630043.jpg
这边安装成功 进去目录就可以启动。
这边是带领大家走了一个安装流程。其实 可以直接copy 项目地址就可以看了
https://github.com/shuyuhan01/vue-test

接下来就简单说下vue3的项目和vue2项目的区别
1.main.ts 中需要从vue import createApp在通过.use的形式 注册路由以及store到 app
2.新增了ref定义初始化数据,去掉methos,多了setup的方法 相关逻辑都写在里面
3.setup 接受props, context,两个参数,像父子间通讯可以用到
4.所定义的实践方法,可以通过函数声明的写法,还需要在return 里面写入,不然会报错
5.还有一些watch computer 生命周期 等写法 都有改变
你们可以看看文档多练习下,有兴趣还可以去看看源代码,详细的api可以看composition-api
https://composition-api.vuejs.org/zh/api.html#setup
最后项目打包到测试环境 遇到一个问题https://segmentfault.com/q/1010000038182104
到现在还没解决

推荐阅读更多精彩内容