一.Vue3快速上手

2020年9月19日凌晨，尤雨溪大大正式发布了 Vue.js 3.0 版本，代号：One Piece。此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API，并为框架未来的长期迭代奠定了坚实的基础。

3.0 版本的开发周期长达两年多，期间产生了 30+ RFCs、2600+ commits、628 pull requests，以及核心仓库之外的大量开发和文档工作。

Vue 3.0 的发布标志着此框架整体上已处于可用状态。尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态（特别是 devtools 中的路由和 Vuex 集成），不过现在仍然是开始使用 Vue 3 启动新项目的合适时机。官方还鼓励库作者现在可以开始升级项目以支持 Vue 3。

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

面对Vue3.0，有人愁，有人喜。愁的原因是它并不好学、API很多、代码范式多元化；喜的原因是Vue3.0生态越来越强大，无论是基础构建工具，还是最佳实践，都让人欲罢不能。

1. 1使用 vue-cli 创建（脚手架）

查看本机有没有安装vue：在cmd命令框里安装vue -V、

出现下面命令，说明没有安装过。

安装或者升级Vue：

npm install -g @vue/cli

保证 vue cli 版本在 4.5.0 以上

vue --version

创建项目

vue create my-project

耐心等待：

步骤：

Please pick a preset - 选择 Manually select features Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步 Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview) Use class-style component syntax - 直接回车 Use Babel alongside TypeScript - 直接回车 Pick a linter / formatter config - 直接回车 Use history mode for router? - 直接回车 Pick a linter / formatter config - 直接回车 Pick additional lint features - 直接回车 Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车 Save this as a preset for future projects? - 直接回车

启动项目：

cd my-project
nmp run serve

访问项目：http://localhost:8080/

1.2 使用 vite 创建

• vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
• 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。
  • 快速的冷启动，不需要等待打包操作；
  • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
  • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

我们新开一个cmd窗口，输入以下命令：

npm init vite-app project-name>
    
cd project-name>

npm install
npm run dev

使用 vite 创建启动成功：

访问效果如下：

二. 部分源码讲解

在vscode里打开上面创建的vue项目，我们得到下面的目录结构：

2.1 main.ts

1. 在src目录下的main.ts是程序的主入口文件，ts 文件。
2. 引入 createApp 函数，创建对应的应用，产生应用的实例对象

import {
 createApp }
     from 'vue'

1. 引入 App 组件（所有组件的父级组件）

import App from './App.vue'

1. 创建 App 应用返回对应的实例对象，调用 mount 方法进行挂载

createApp(App).mount('#app')

这里的挂载是在，public目录下的index.html里的id为app的盒子里进行渲染。

2.2 App.vue

Vue2 中的 htm 模版中必须要有一对根标签，Vue3 组件的 html 模版中可以没有根标签：

template>
    
  img alt="Vue logo" src="./assets/logo.png">
    
  HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    
/template>
    

这里可以使用ts代码：

script lang="ts">

import {
 defineComponent }
     from 'vue';
    
import HelloWorld from './components/HelloWorld.vue';


export default defineComponent({

  name: 'App',
  components: {

    HelloWorld
  }

}
    );
    
/script>
    

上述代码解释：

• defineComponent 函数， 目的是定义一个组件， 内部可以传入一个配置对象
• import HelloWorld from './components/HelloWorld.vue'; 引入一个子级组件
• export default defineComponent：暴露出去一个定义好的组件

组件名字是App， components：注册组件，里面是注册一个子级组件。

  name: 'App',
  components: {

    HelloWorld
  }
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！