学习笔记_构建工具

构建工具

企业级项目具备：

1.typescript:tsc编译(typescript语法转换工具)

2.vue/React:安装React-complier/vue-complier(将.vue文件转化为render函数)

3.less/sass/postcss/component-style(安装less-loader,sass-loader)

4.语法降级：babel–>兼容性,将新语法转换浏览器可以接受的语法

5.体积优化：uglifyjs–>代码压缩体积变小

构建工具可以将所有工具集成

1.模块化开发：支持从NodeModule引入代码impron _ from “lodash”,不用使用相对绝对路径

2.代码兼容：构建工具将语法处理工具集成自动处理

3.提高项目性能：打包会压缩文件，代码分割，优化开发体验（改一点不用频繁重新编译），构建工具会自动监听

vite

1. 初始化包，npm i -y

2. 安装vite,开发环境依赖，npm i vite-D

3. 安装vue，npm i vue

4. 创建index.html(入口文件),使用script引入脚本文件

   <script type="module" src="./src/main.js"></script>
   

   5.创建src->main.js->App.vue

//main.js
import {creatAPP} from 'vue'
import App from './App.vue'
const app=createApp(App)
app.mount("#app")

//APP.vue
<template>
hello
</template>

6.vue文件运行插件,开发环境依赖（npm i @vitejs/plugin-vue -D）

7.vite.config.js

import {defineConfig} from 'vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins:[Vue()]
})

8.npm run dev

vuecli

npm install -g @vue/cli
# OR
yarn global add @vue/cli
//升级
npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli