爱共享 爱生活 加油 2021

百度网盘

提取码：qhhv 

安装

npm  install -g vite

image.png

初始化项目

创建并进入vite-demo文件夹

  • 1.初始化项目

npm init -y

  • 2.下载最新的vue

npm install -S vue@next

image.png

  • 3.创建index.html，main.js，App.vue文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <div id="app"></div>    <script type="module" src="./main.js"></script></body></html>// main.js文件import {createApp} from 'vue'import App from './App.vue'createApp(App).mount('#app')// App.vue文件 <template>    <div>        hellow vite    </div> </template> <script> export default{} </script> <style scoped> </style>

下载vue3的compiler

npm isntall -D @vue/compiler-sfc

image.png

 

安装完之后，直接就可以在终端输入vite命令使用了

一、安装

选择一个文件夹，在终端中打开

使用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://test.rocksea.net.cn: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中会出现这样一个错误