一、vue3 项目的搭建

使用 Vue CLI 搭建：

注意

Vue CLI 现已处于维护模式! 现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。 另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。本文所记录的项目也将采用 create-vue 方式搭建。

搭建过程：

使用 Vue CLI 所搭建的项目基于 webpack 运行，搭建方式如下：

1. 使用npm包管理工具全局安装@vue/cli:

npm install @vue/cli -g

2. 打印版本号查看脚手架是否安装成功：

vue --version

3. 创建vue项目

vue create vue-demo

使用 create-vue 搭建：

create-vue 搭建的项目基于 vite，搭建方式如下：

搭建过程：

1. 创建 vue2 项目：

npm init vue@2

2. 创建 vue3 项目，本文仅记录 Vue3 开发过程，所以使用以下命令：

npm init vue@3

3. 创建 vue 的最新版：

npm init vue@latest

注意

版本号（@3或@2）不得省略，否则npm可能会解析到包的缓存和过时版本。

4. 示例：

PS F:\my-project> npm init vue@3

Need to install the following packages:
  create-vue@3
Ok to proceed? (y)  # 是否继续安装create-vue@3

Vue.js - The Progressive JavaScript Framework

√ Project name: »  vue3-demo  # 项目名称
√ Add TypeScript? ... No / Yes  # 是否加入TypeScript
√ Add JSX Support? ... No / Yes # 是否支持JSX
√ Add Vue Router for Single Page Application development? ... No / Yes  # 为单页面应用程序添加Vue Router开发
√ Add Pinia for state management? ... No / Yes  # 是否加入Pinia作为状态管理器
√ Add Vitest for Unit Testing? ... No / Yes  # 是否添加Vitest做单元测试
√ Add Cypress for both Unit and End-to-End testing? » No / Yes  # 是否加入Cypress作为端到端测试
√ Add ESLint for code quality? ... No / Yes  # 是否加入ESLint
√ Add Prettier for code formatting? ... No / Yes # 是否加入Prettier

Scaffolding project in F:\my-project\vue3-demo...

Done. Now run:

  cd vue3-demo
  npm install
  npm run lint
  npm run dev

与 Vue CLI 的区别：

• Vue CLI 基于 webpack，而create-vue基于Vite。Vite 开箱即用地支持 Vue CLI 项目中的大多数配置约定，并由于其极快的启动和热模块更换速度提供了显着更好的开发体验。
• 与 Vue CLI 不同，create-vue它本身只是一个脚手架工具：它根据您选择的功能创建一个预配置的项目，并将其余部分委托给 Vite。以这种方式搭建的项目可以直接利用与Rollup 兼容的Vite插件生态系统。

开发中的区别：

• 在webpack中通过require()方法获取文件资源路径，而在Vite中需要借助 new URL() 这个Vite内置的构造方法才能拿到资源路径，如下：

JS

const getAssetURL = (image) => {
  // 在实例化这个构造方法的同时需要传入两个参数。
  // 参数一：文件的相对路径  参数二：import.meta.url 是一个ESM的原生功能，会暴露当前模块的 URL。
  // 最后通过.href 拿到该路径
  return new URL(`@/assets/img/${image}`, import.meta.url).href;
};

export default getAssetURL;

TS

const getAssetURL = (image: string) => {
  // 在实例化这个构造方法的同时需要传入两个参数。
  // 参数一：文件的相对路径  参数二：import.meta.url 是一个ESM的原生功能，会暴露当前模块的 URL。
  // 最后通过.href 拿到该路径
  return new URL(`@/assets/img/${image}`, import.meta.url).href;
};

export default getAssetURL;

上述方法对获取资源路径方法又做了一层封装，方便直接获取@/assets/img下的图片资源，如果需要使用@/assets/img/banner.png则使用方式如下：

getAssetURL('banner.png');