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/