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

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

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

vue提供了多个版本

传统项目引入

全局构建版本

  
    Count is: {{ count }}
  

ES模块构建版本

{{ message }}

拆分模块

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

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

微服务项目

脚手架

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

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等页面