vue3創建項目（系列一）

1.Vue3.0-快速上手

- 創建Vue3的3種方式

    + Vue-CLI

    + Webpack

    + Vite

 

我用 Vite （尤自創的方案）

2.什么是Vite?
- Vite是Vue作者開發的一款意圖取代webpack的工具
- 其實現原理是利用ES6的import會發送請求去加載文件的特性,
  攔截這些請求, 做一些預編譯, 省去webpack冗長的打包時間

- 安裝Vite
    npm install -g create-vite-app
- 利用Vite創建Vue3項目
    create-vite-app projectName
- 安裝依賴運行項目
    cd projectName
    npm install
    npm run dev
2.Vue3.0兼容Vue2.x 3.Vue3.0-Custom Renderer API
-->
<!--
- Webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName
cd projectName
npm install
npm run dev

- Vue-CLI
npm install -g @vue/cli
vue create projectName
cd projectName
vue add vue-next
npm run serve

 

全新的 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 的，過去的語法這里依舊可以正常使用。

 

 

尚硅谷vue3視頻，B站；https://www.bilibili.com/video/BV1ra4y1H7ih
尚硅谷vue3文檔；https://24kcs.github.io/vue3_study
官方vue3文檔，https://v3.cn.vuejs.org/guide/introduction.html#%E8%B5%B7%E6%AD%A5
關於vue3的項目開源，https://github.com/vue3/vue3-News

不錯的博客；https://dxmo.gitee.io/tags/%E9%9D%A2%E8%AF%95/