一、安装
选择一个文件夹，在终端中打开
使用npm进行安装（需要 Node.js 版本 >= 12.0.0），输入以下命令
npm init @vitejs/app
使用yarn进行安装，输入以下命令
yarn create @vitejs/app
也可一步创建
npm init @vitejs/app my-vue-app --template vue
具体步骤见下图，这里使用的是yarn
创建项目的三步
yarn install后执行yarn run dev，可以看到，启动项目只用了1秒多（选择的模板为vue）
二、新增特性
1.结合script setup语法糖
从上图中可以看到vite初始化出来的组件script标签中默认加入了setup，这种写法源于之前的一个关于script setup提案，感兴趣的可以看下，写法跟之前有很多区别，写了两个demo，可以实际运行起来体验下，用的是上面初始化的项目，写法比之前简单许多。
（父组件，也就是App.vue)
//App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue + Vite" @mycilck="myclick" ref="child"/>
<button @click="childlog">子组件方法</button>
</template>
<script setup>
//组件导入，不用注册直接使用,属性方法定义，无需retrun
//<script setup>这种写法会自动将所有顶级变量声明暴露给模板（template）使用
import HelloWorld from "comps/HelloWorld.vue"
import {ref} from "vue"
const child=ref(null)
const myclick= ()=>{
console.log("this is myclick");
}
const childlog=()=>{
child.value.log("父组件传递的数据")
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
（子组件，也就是HelloWorld.vue)
//HelloWorld组件
<template>
<h1>{{ msg }}</h1>
<button @click="state.count++">count is: {{ state.count }}</button>
<button @click="onclick">emit</button>
</template>
<script setup>
import { defineProps, reactive, useContext } from 'vue'
import { defineEmit } from 'vue'
//1.pops属性定义
defineProps({
msg: String,
})
//2.获取上下文
const ctx = useContext()
//向外暴露的方法
ctx.expose({
log:function(str) {
console.log('子组件暴露的方法',str)
},
})
//3.emit接收事件
const emit = defineEmit(['myclick'])
const onclick = () => {
//也可直接使用上下文中的emit:ctx.emit('mycilck')
emit('mycilck')
}
const state = reactive({ count: 0 })
</script>
<style scoped>
a {
color: #42b983;
}
</style>
2.配置项，更多详细配置见官网
// 通过引入defineConfig来加入代码提示
import { defineConfig } from 'vite'
// 通过引入vue插件来完成对vue的支持,须在plugins中注册
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
export default defineConfig({
//1.别名配置
resolve: {
alias: [
{ find: '@', replacement: resolve(__dirname, 'src') },
{ find: 'comps', replacement: resolve(__dirname, 'src/components') },
],
},
//2.插件相关配置
plugins: [vue()],
//3.服务有关配置
server: {
open: true,
/* 设置为0.0.0.0则所有的地址均能访问 */
host: '0.0.0.0',
port: 9000,
https: false,
proxy: {
'/api': {
/* 目标代理服务器地址 */
target: 'http://xxx:9000/',
/* 允许跨域 */
changeOrigin: true,
},
},
}
})
3.css更好的支持
现在单独的一个css文件也可导入,如在当前组件需要main.css中定义的样式，只需要@import url(）
<style scoped>
@import url('../assets/css/main.css');
</style>
更多有关CSS特性参考官网给出的配置，我这里就不详细说明了
三、问题
1.vite中不能使用require
有时候，我们需要动态绑定图片的时候会用到require('../xxx')
但是在vite中会出现这样一个错误
原因：因为vite使用的是浏览器自带的module去解析js的,而require语法是node语法,自然报错
解决：
1.直接使用import导入，import imgUrl from './img.png'，界面中直接使用即可。详细可参考官网，静态资源处理
2.使用绝对路径或者把需要require引入的图片放到public文件夹下,这样打包前后路径都不会被处理,可以保证路径的正确性
有关项目我已上传，地址为https://github.com/czy1026/vite-test.git
