09-Vue-Vite

南工大第一帅哥
170 阅读3分钟

Vue CLI 脚手架

帮我们搭建项目的工具

图片.png

Vue CLI安装和使用

1.安装脚手架

npm install @vue/cli -g

全局安装，以后在任何位置都可以使用脚手架

升级Vue CLI

npm update @vue/cli -g

2.通过Vue的命令来创建项目

1.vue create _项目名_   

2.Manually select features 手工指定

3.选择特性
    （1）babel
        是否引入转码功能，该项功能可将es6转码成es5

    （2） TypeScript
        是否引入ts，引入后可使用ts进行编程

    （3）Progressive Web App (PWA) Support
        是否引入渐进式Web应用程序（PWA）支持 （pwa为应用多项技术的web app。核心技术包括 App Mainfest、Service Worker、Web Push,等等）

    （4）Router
        是否引入vue-router

    （5）vuex
        是否引入状态管理

    （6）css-processors
        是否引入css预处理

    (7) linter / formatter
        是否引入格式验证

    (8) Unit Testing
        是否引入单元测试

    （9）e2e Testing
        是否引入 end to end 测试

4.选择Vue版本 3.x

5.配置选项放在package.json还是单独包下 In dedicate 

6.要不要将刚刚的选择保存为预设（以后就不用再选了，直接帮你选好）-->y-->取名字-->开始创建

项目目录结构

图片.png

执行与打包

脚手架已经帮我们在package.json中的scripts中写好了serve和build

npm run serve
npm run build

Vue CLI 原理

"scripts":{
    "serve":"vue-cli-service serve",  
    "build":"vue-cli-service build",
}

以前这里是 "webpack serve"

表示从node_modules中的bin中的vue-cli-serveice中执行代码

实际上执行的是node_modules-@vue-cli-service-package.json中的vue-cli-service="vue-cli-service.js"的命令

vue0cli-service.js：

图片.png

图片.png

-----------------------------------------太难了暂时跳过

认识Vite

下一代：领先vue的版本；webpack的替代 图片.png

图片.png

Vite的使用

Vite要求Node>12版本

npm install vite -g  全局
npm install vite -D  局部

局部运行： npx vite

想执行less，必须先安装

npm install less -D

postcss：自动加上浏览器前缀，优化css

首先先安装postcss工具，其次安装插件

npm install postcss
npm install postcss-preset-env -D

然后配置postcss; postcss.config.js

图片.png

vite--》转成ES modules，所以不支持require

Vite对TS的支持

Vite2使用的本地服务器是：Connect

浏览器向服务器请求的直接是.ts和.less文件，但是服务器不能直接提交给浏览器，因为浏览器解析不了。

所以Vite会先拦截，将.less、.ts文件，转换，生成了新的文件。新文件的名字和老文件名字是一样的，但是内部代码变成了ES6的js代码，然后转发。

最后浏览器收到后，通过解析后，就可以返回结果

Vite其实就是一个服务器，帮我们解析代码，然后替代转发，最后浏览器执行。

图片.png

对vue的支持

1.安装

npm install vue@next

2.导入 import {createApp} from 'vue' import App from './vue/App.vue'

create(App).mount(#app)

图片.png

安装插件

npm install @vitejs/plugin-vue -D
npm install @vue/compiler-sfc -D

创建vite.config.js,执行vue()函数

图片.png

vite预打包

在node_modules中会有一个vite文件夹，npx vite后，会生成vite文件夹，后续import loadash-es、vue这种时，npx vite,不会再次打包，而是在原来的基础上更新打包，效率更高

图片.png

vite打包

npx vite build

生成dist文件夹

npx vite preview

查看打包后是否正确

在真实开发中，不会一直使用npx，所以在package.json中的

"scripts":{
    "serve":"vite",
    "build":"vite build",
    "preview": "vite preview"
}

npm run serve

ESBuild = webpack部分功能+Babel

为什么vite打包这么快？因为他用了ESBuild

它是一个「JavaScript」Bundler 打包和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

图片.png

图片.png

图片.png

Vite的脚手架

图片.png

1.npm install @vitejs/create-app -g
2.create-app _项目名_

01选择项目框架：vue 框架 02选择 vue/vue-ts 03下载依赖 04执行项目:npm run dev / npm run build打包

avatar
文章
阅读
粉丝