如何使用Vue3.x来搭建一个项目

举半个栗子
186 阅读2分钟

vue3.x 入门

本文档主要适用于有 Vue2 经验的，希望了解 Vue3 的新功能和更改的用户而提供的。

前言

在学习 Vue3x 之前我们应该清楚怎么去切入，应该通过哪些方向去切入，并且从哪些方面和 Vue2x 作比较,比如：

  • Vue-cli

  • Vue-router

  • VueX

    等等一些在 Vue2 中使用过的技术栈

快速开始

  • 如果想要在一个新的项目里快速尝试 Vue3(官网提供三种方法):

    1. 通过 CDN：

      <script src = "https://unpkg.com/vue@next">  </script>

    2. 通过脚手架 vue-cli:

      安装脚手架 npm install @vue/cli -g  或者 yarn global add @vue/cli

创建vue项目   vue create 项目名称
###选择 vue 3 版本(mac 可是使用上下切换，window可以使用数字切换)

    3. Vue3 中新增的脚手架工具 Vite(cn.vitejs.dev 官方中文文档):

      安装vite，并新建和初始化项目 npm init vite xxx

安装vite，并新建和初始化项目，并且指定框架
npm init vite xxx -- --template vue

使用 vue-cli 来构建一个 vue 项目

  1. 全局安装 vue-cli

    npm install @vue/cli -g

  2. 创建一个 vue 项目

    vue create vue-temp

1.png

​ 直接点击回车的话默认还是 vue2x 版本，如果你也是 windows 系统，那么就可以进行如下的操作：(直接输入数字 2)

2.png

走进项目

  • 项目结构和 vue2 的项目结构的一样的，并没有什么太大的差别 3.png

  • 配置文件也是基本没啥变化的

  • main.js 入口文件看起来要比 vue2 的整洁许多

4.png

  • 还有我认为变化比较大的是 template 中不需要一个必须的根节点了

5.png

以上就是今天所分享的东西了

总结

作为一个开发人员，不仅是学习能力要强，而且必须要做到落地这一步。

何为落地呢，那就是技术沉淀，只是知道学习，而不做沉淀的话，那么学的越快你也就忘的越快。

那么怎样才能做好技术沉淀呢，我认为最好的方法就是写博客，毕竟好记性不如烂键盘嘛，哈哈哈。虽然坚持写博客这件事开头很难，但是要是坚持下来也是一件很了不起的事情！加油！（欢迎关注，以后我会持续分享）

​ -------前端小白写博客的第一天

avatar
文章
阅读
粉丝