Vue3简单使用（一） --- 环境搭建

vue提供了多个版本

传统项目引入

全局构建版本

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="module">
const { createApp, ref } = Vue
createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
</script>

ES模块构建版本

<div id="app">{{ message }}</div>
<!-- 使用importmap可以import from 字符串 -->
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>
<script type="module">
  // import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  import { createApp, ref } from 'vue'
  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

拆分模块

在传统项目中因为无法使用vite、webpack对vue进行编译，只能使用js拆分模块

<!-- index.html -->
<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'
  createApp(MyComponent).mount('#app')
</script>

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>count is {{ count }}</div>`
}

微服务项目

脚手架

可以简单使用官方提供脚手架创建可用项目。

npm create vue@latest

空项目开始

1.vue、vite、@vitejs/plugin-vue 三个包是必须的

npm install vue
npm install -D vite @vitejs/plugin-vue

2. 修改package.json，增加npm脚本(scripts)

{
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "vite": "^5.0.0"
  }
}

3.  增加vite.config.js，引入vite、@vitejs/plugin-vue插件

import vue from '@vitejs/plugin-vue'
import {defineConfig} from 'vite'

export default defineConfig({
	plugins:[
		vue()
	]
})

4.至此，环境基本完成，可以继续添加 index.html、main.js、com.vue等页面

<!-- index.html -->
<div id="app"/>

<script type="module">
import {createApp} from 'vue'
import com1 from './com1.vue'

let app = createApp(com1)
app.mount('#app')
</script>

<!-- com1.vue -->
<template>
<div>
	com1
</div>
</template>