手摸手光速使用Vue 3.0（一）

1. 环境搭建

1.1 使用vue-cli

1. 要保证vue-cli是最最最新新新版本（4.x），我的是4.4.1，如果不是，请运行以下命令升级：

npm install vue-cli@next -g

或者

npm install vue-cli@4.4.1 -g

2. 按照常规方式创建vue-cli项目

vue create projectName
cd projectName

3. 安装vue3.0及其周边

vue add vue-next

安装完成后看一眼package.json，如果按照上述步骤操作，package.json相关的一些vue和周边应该是这样子：

1.1.2 通过CDN引入

<script src="http://unpkg.com/vue@next"></script>
<div id="app"></div>

<script>
  const { createApp } = Vue
  const App = {
    template: `<span>hello Vue</span>`,
  }
  createApp(App).mount('#app')
</script>

至此，环境搭建完毕，可以愉快地徜徉在vue 3.0的海洋了。

2. 开始使用

本小节陈述main.js里一些开发常用的配置

1. 打开main.js这个文件

导入方式的变化:

// 2.x
import Vue from 'vue'

// 3.x
import { createApp } from "vue";

使用这个函数来创建实例、挂载

// 3.x
const app = createApp(App);
app.mount('#app')

插件的使用方式也有所改变

// 2.x
Vue.use(router)

// 3.x
const app = createApp(App);
app.use(router)

挂载全局方法：

// 2.x
Vue.prototype.$http = axios

// 3.x
const app = createApp(App);
app.config.globalProperties.$http = axios;
app.provide("$http", app.config.globalProperties.$http);

// 子组件使用全局方法
// 省略一些代码
import { inject } from 'vue'

export default {
  setup() {
    const $http = inject('$http')
    $http.get('api/city/index.json')
   }
}

说明：setup函数提供两个参数：props和context，context参数提供当前渲染上下文的有关信息。几个月之前，在context参数中有一个root属性，可以拿到根实例，这样就可以通过context.root.$http拿到全局挂载的方法。但是根据我2020年6月6日的探索，发现现在context没有root属性了，所以采用了上文依赖注入的方式。 如果有其他的方式，请联系我，我会装作没看到（并不