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

node版本管理工具nvm，nvm list、nvm use 14.18.0
可以简单启动服务器：npx serve

安装包：npm install xx1 xx2，npm install -D xx3 xx4

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>