七夕花10分钟学用npm搭建vue3.0接下来，在浏览器中打开命令行中后面提示的任一url，看到熟练的界面。。。开发环

vite安装环境，其实就是下载个vue3.0的模板

npm init vite-app 项目名

接下来到项目目录执行npm安装的常规操作

npm install

熟悉的目录结构：

启动项目

npm run dev

接下来，在浏览器中打开命令行中后面提示的任一url，看到熟练的界面。。。

看一下源码：


<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">import "/vite/client"</script>

  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

开发环境上js竟然是module，看上去很方便。点/src/main.js进去瞧一瞧

import { createApp } from '/@modules/vue.js'
import App from '/src/App.vue'
import '/src/index.css?import'

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

调bug也比vue2.0直观。

对比源码 src/main.js

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

createApp(App).mount('#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>

看一下组件的写法

<template>
 <h1>{{ msg }}</h1>
 <button @click="count++">count is: {{ count }}</button>
 <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
 name: 'HelloWorld',
 props: {
   msg: String
 },
 data() {
   return {
     count: 0
   }
 }
}
</script>

和2.0一个样

打包

npm run build

主js文件

_assets/index.fee30bbd.js   39KB

才39KB，跟想像中的一样，比vue2.0要小得多！毕竟Proxy比较先进。。。

不过，得看一下Proxy的兼容性，IE就别想了，也没法向下兼容！

最后，单凭Proxy，vue3.0肯定比2.0更高效，代码更小，但项目要求兼容IE的话，只能呵呵了。。。

最最后，七夕快乐！