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>