node版本管理工具nvm,nvm list、nvm use 14.18.0
可以简单启动服务器:npx serve
安装包:npm install xx1 xx2,npm install -D xx3 xx4
vue提供了多个版本
传统项目引入
全局构建版本
html
<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模块构建版本
html
<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拆分模块
javascript
<!-- 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>`
}
微服务项目
脚手架
可以简单使用官方提供脚手架创建可用项目。
bash
npm create vue@latest
空项目开始
1.vue、vite、@vitejs/plugin-vue 三个包是必须的
bash
npm install vue
npm install -D vite @vitejs/plugin-vue
- 修改package.json,增加npm脚本(scripts)
javascript
{
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.3.8"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"vite": "^5.0.0"
}
}
- 增加vite.config.js,引入vite、@vitejs/plugin-vue插件
javascript
import vue from '@vitejs/plugin-vue'
import {defineConfig} from 'vite'
export default defineConfig({
plugins:[
vue()
]
})
4.至此,环境基本完成,可以继续添加 index.html、main.js、com.vue等页面
html
<!-- 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>