一文快速上手-create-vue脚手架

文章目录

• • [初识 create-vue](#初识 create-vue)
  • create-vue新建项目
  • [Vue.js 3 项目目录结构](#Vue.js 3 项目目录结构)
  • 项目的运行和打包
  • vite.config.js文件解析
  • 其他：webpack和Vite的区别

初识 create-vue

create-vue类似于Vue CLI脚手架，可以快速创建vuejs 3项目，create-vue基于Vite。Vite支持Vue CLI中的大多数配置，并且Vite以极速启动服务、快如闪电的热重载，提供了更好的开发体验。

与Vue CLI 不同的是，create-vue脚手架会根据你选择的功能创建一个预配置的项目，然后将其余部分委托给Vite。

注意：create-vue脚手架要求Node.js版本大于16。

create-vue新建项目

create-vue脚手架创建vue3版本项目，有两种常见的方式。

1.全局安装create-vue脚手架

npm i create-vue@latest -g

使用create-vue命令创建Vue.js 3 项目。

创建项目命令：

create-vue createapp-vue3demo

其中createapp-vue3demo是项目名称。

2.局部安装create-vue脚手架

npm init vue@latest

这里执行npm init vue@latest的意思：

• 临时安装create-vue@latest脚手架（注意：不是全局安装）
• 安装完成后立即执行create-vue命令来创建项目

在VScode终端执行npm init vue@latest命令，创建一个如02-createapp-demo项目，如下所示(示例代码都选择了否，实际项目中根据需要选择相应的功能)：

请输入项目名称： ... createapp_demo
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ >> 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是

Vue.js 3 项目目录结构

createapp_demo/       # 项目的名称（命名规范：建议统一小写，多个单词使用下划线分割）
|-- public/              # 静态资源目录  
|   |-- favicon.ico      # 网站图标  
|-- src/                 # 源代码目录  
|   |-- assets/          # 存放静态资源，如图片、字体等  
|   |-- components/      # 可复用的 Vue 组件目录  
|   |-- views/           # 页面目录，存放路由对应的组件  
|   |-- App.vue          # 根组件  
|   |-- main.js          # 项目的入口文件  
|   |-- main.ts          # TypeScript 版本的入口文件（如果选择了 TypeScript）  
|-- tsconfig.json        # TypeScript 配置文件（如果选择了 TypeScript）  
|-- .gitignore           # Git 忽略的文件和目录  
|-- index.html           # 项目的入口 HTML 文件  
|-- package.json         # 项目的元数据和依赖信息  
|-- package-lock.json    # npm 依赖锁定文件  
|-- vite.config.js       # Vite 配置文件  
|-- README.md            # 项目说明文件

项目的运行和打包

"dev": "vite",
"build": "vite build",
"preview": "vite preview"

说明：

• dev：启动项目的本地运行脚本
• build：打包项目的脚本
• preview：预览编译后的项目的脚本

vite.config.js文件解析

与Vue CLI相同，create-vue脚手架也提供了一些常用的配置，方便我们进行扩展和自定义。这些配置包括outDir、assetsDir、alias、base和server等。

vite.config.js默认的配置代码如下：

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

• 1.outDir：指定打包输出的目录名称，默认是dist（与vue.config.js中的outputDir功能相同）。

  export default defineConfig({
  ......
  build: {
  outDir: 'build'
  }
  })

• 2.assetsDir：用于指定静态资源存放的目录，默认是assets（与vue.config.js中的assetsDir功能相同）。

项目代码编译后，index.html引入资源默认情况如下：

<script type="module" crossorigin src="/assets/index-BEb411hP.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BaMTLMsk.css">

配置：

export default defineConfig({
  ......
  build: {
    outDir: 'build',
    assetsDir: 'static' // 指定静态资源存放目录（相对于build.outDir），默认是assets
  }
})

上面配置调整后，index.html引入资源情况如下：

<script type="module" crossorigin src="/static/index-lKLvkvL0.js"></script>
<link rel="stylesheet" crossorigin href="/static/index-BaMTLMsk.css">

• 3.base：用于指定开发或者生产的公共基础路径，即指定引用资源的前缀（与vue.config.js中的publicPath功能相同），代码如下：

  export default defineConfig({
  base: './'
  })

base属性支持：

- 绝对URL路径，如`/my-app/`
- 完整URL，如`http://it.com/`;
- 用于开发或者生产环境的空字符串或'./'

• 4.alias：用于为导包的路径设置别名（与vue.config.js中的alias功能相同），示例代码如下：

  export default defineConfig({
  .......
  resolve: {
  alias: {
  '@': fileURLToPath(new URL('./src', import.meta.url)),
  'components': fileURLToPath(new URL('./src/components', import.meta.url))
  }
  },
  ......
  })

引入HelloWorld组件就有如下三种方式：

import HelloWorld from './components/HelloWorld.vue'
import HelloWorld from '@/components/HelloWorld.vue'
import HelloWorld from 'components/HelloWorld.vue'

• 5.server：用于开发环境设置服务器选项

示例：

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: "localhost",
    port: 8081,
    open: true,
    proxy: {},
  },
});

其他：webpack和Vite的区别

Vue CLI是基于webpack实现的，而create-vue是基于vite实现的。

主要区别：

• 在打包应用程序时，webpack会生成一个依赖关系图。该依赖关系图中含有应用程序所需要的所有模块，然后遍历图结构，编译一个个模块，当某个模块有变化时，相关依赖模块需要全部编译一次。项目越复杂、模块越多，打包速度就越慢。
• Vite利用ES Module 可以自动发起请求的特性，在打包应用程序时，Vite不需要分析模块的依赖，也不需要编译。当浏览器请求某个模块时，再按需对模块内容进行编译，这种按需动态编译的方式大幅度减少了编译时间。因此，Vite的启动速度非常快，比JavaScript编写的打包器预构建依赖的速度快10倍到100倍，项目越复杂、模块越多。
• Vite 天然支持打包TypeScript、JSX、CSS等文件；而webpack需要安装对应的Loader进行处理。
• webpack支持开发和生产环境打包；Vite在打包生产环境时需要使用Rollup，Vite的主要优势体现在开发阶段。
• webpack无论是自身优势还是生态都非常强大，使用者非常多；而Vite的整个社区生态正在快速完善。

说明：ES Module 是 JavaScript 的官方模块化标准，它允许开发者通过import和 export 语句来组织和分享代码。特别地，ES Module 支持动态导入，即使用 import() 函数来异步地加载一个模块。这种动态导入的特性为 Vite 提供了按需编译的基础。

注意事项：

• 虽然 Vite 的按需编译策略在开发过程中非常有效，但在生产环境中，通常仍然需要静态地分析和打包代码，以确保最佳的加载性能和兼容性。因此，Vite 提供了构建命令，用于在生产环境中生成优化过的代码 bundle。
• 在企业生产环境中，建议优先选择 Vue CLI脚手架，因为 webpack 经过多年发展，已经非常稳定，社区生态也非常成熟。