Vue3.0学习 - 第二节，Vue3 项目创建

创建 Vue3 的三种方式

• Vue-Cli
• Webpack
• Vite

我用 Vite （尤自创的方案），另外两种方法请自己搜索。

• Vite 的实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间。

1、安装vite

npm install -g create-vite-app

1、利用 Vite 创建 Vue3 项目

vue3.0.4

create-vite-app projectName

3.0.5 

npm init @vitejs/app hello-vue3 # OR yarn create @vitejs/app hello-vue3（项目名称）

可供选择的模板，本文选择Vue

 Select a template: … 
  vanilla
❯ vue
  vue-ts
  react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts
  svelte
  svelte-ts

 

2、安装依赖、运行项目 

cd projectName
npm install
npm run dev

3、打包

npm run build

全新的 main.js 文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

 

一个过去在 Vue2 中，我没见过的方法，createApp，采用 querySelector 的方法将 App.vue 中的 id=app 标签内容进行挂载。

顺带一提，App.vue 长这样。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

 

内容构造基本和 Vue2 没差。

另外 Vue3 也是基本兼容 Vue2 的，过去的语法这里依旧可以正常使用。