Vue CLI 和 Vite

一、Vue CLI脚手架

1. 安装和使用

1.1 系统全局安装

npm install @vue/cli -g

1.2 升级Vue CLI

如果是比较旧的版本，可以通过下面的命令来升级

npm update @vue/cli -g

1.3 创建项目

通过 vue 的命令来创建项目

vue create '项目的名称'

2. 项目创建过程

通过运行上述vue create '项目名称'命令后，会展示如图的配置选择：图源自 codewhy老师。

image-20220924163711873

二、Vite

1.Vite介绍

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。

它主要由两部分组成：

# 启动 vite 服务
vite
# 打包
vite build
# 预览打包后的index.html
vite preview

1.1 用法

Vite 官网上可直接借助vite工具直接生成相应框架的项目、例如：Vue、React等。

npm create vite@latest

yarn create vite

然后按照提示操作即可！

2. Vite 打包基本使用

不使用官方的vite脚手架构建vite项目。从零开始创建 vite项目

2.1 安装

# 为项目局部安装 vite
npm i vite -D
# 为本机全局安装 vite
npm i vite -g

2.2 目录结构

├── mode_modules
├── src
|   ├── css
|   |   ├── theme.css
|   ├── js
|   |   ├── math.js
|   ├── main.js
├── index.html
├── package.json

2.2.1 文件内容

  • theme.css

    body {
  background-color: paleturquoise;
}
.title {
  font-size: 24px;
  color: rebeccapurple;
  background-color: palegreen;
  padding: 10px;
}

  • math.js

    console.log('math.js');

export function sum(num1, num2) {
  return num1 + num2;
}

export function mulity(num1, num2) {
  return num1 * num2;
}

  • main.js

    // 引入 ESmodule模块JS
// import { sum, mulity } from './js/math.js';
import { sum, mulity } from './js/math'; // 使用vite后可不加js后缀，因为构建工具自动添加

// 引入 css 样式
import './css/theme.css';

const H2Element = document.createElement('h2');
H2Element.className = 'title';
H2Element.innerHTML = '你好，陈平安';

document.body.appendChild(H2Element);

console.log(sum(1, 8));
console.log(mulity(1, 8));

console.log('hello,world');

  • index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module" src="./src/mian.js"></script>
</body>
</html>

2.3 运行

  1. 在该项目中局部安装 vite
npm i vite -D
  1. 在终端命令行中运行：
# 执行本地的 vite
npx vite

通过Ctrl+鼠标左键就可进入 vite 创建的本地服务。

  1. html 展示

这样我们使用 ESmodule 引入的JS 和 通过模块引入的 css 都能正常加载。（相比于 webpack，vite自动帮我们处理了 css 样式）

3. 其他资源的打包

3.1 使用 less

3.1.1 新建 style.less

.title {
  text-decoration: underline;
}

3.1.2 引入

// main.js
// 引入 less 样式
import './css/style.less';

当在 main.js 中直接引入.less 文件时，vite 就会报错：

提示你 less 依赖未找到，是否安装它。所以解决方案就是下载less依赖

npm i less -D

安装完后，直接在main.js中 Ctrl+S就可重新更新运行。

3.2 postcss的转换

postcss 为 CSS 规则添加特定厂商的前缀。通过 Autoprefixer 插件自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

Vite 能直接支持postcss的转换，配置 postcss.config.js 的配置文件即可

3.2.1 安装

npm install postcss postcss-preset-env -D

3.2.2 配置

项目根目录下新建postcss.config.js

module.exports = {
  plugins: [
    // 使用 postcss预设
    require('postcss-preset-env')
  ]
};

3.2.3 添加样式

在theme.css中添加

body {
  background-color: paleturquoise;
}
.title {
  font-size: 24px;
  color: rebeccapurple;
  background-color: palegreen;
  padding: 10px;
  /* 添加如下样式 */
  user-select: none;
}

因为更改了相应的配置文件，重新需要重新运行 npx vite

随后在浏览器中就可看到postcss自动添加的浏览器前缀：

3.3 对TypeScript的支持

vite 默认就支持对 .ts 文件。

  • src/ts/log.ts

    export function log(msg) {
  return `${new Date().toLocaleString()}--${msg}`;
}

  • mian.js

    // 引入 ts 文件
import { log } from './ts/log';

console.log(log('使用TS文件'));

  • 浏览器可正常打印出数据。证明默认支持ts文件

3.4 vue文件

Vite 为 Vue 提供第一优先级支持：

3.4.1 在 main.js 中引入vue文件

App.vue

<template>
  <div>
    <h2>在Vite中加载Vue文件</h2>
    <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'App.vue'
    };
  }
};
</script>

<style>
h2 {
  color: aliceblue;
}
</style>

main.js

// 引入Vue
// 下载vue依赖 npm i vue -D
import { createApp } from 'vue';
import App from './vue/App.vue';

// vue 代码
createApp(App).mount('#app');

npx vite运行：

默认不支持对vue文件的解析，需下载相应的插件@vitejs/plugin-vue

3.4.2 安装插件

npm i @vitejs/plugin-vue -D

3.4.3 配置

项目根目录创建vite.config.js

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // 添加对vue文件的支持
    vue()
  ]
});
posted @ 2022-09-30 14:33  青柠i  阅读(840)  评论(0)  编辑  收藏  举报