【个人记录参考】Vue3搭建项目

前言：

之前学vue的时候学的是vue2（虽然当时vue3已经出了）。现在也过了一段时间，想尝试vue3的自己搞搞，然后发现之前写的Vue2项目构建)的内容完全对不上vue3的了，为了方便以后自己参考，所以就记录了本篇

本篇主要方便我自己以后参考，不排除可能存在错误，如按本篇使用请谨慎辨别

如有发现错误，欢迎大佬指出🤣

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。

安装node.js和npm

（这样部分我把Vue2项目构建)的这部分搬来了，如果弄过相关内容请跳过）

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

——引自菜鸟教程

node.js官网下载Node.js (nodejs.org)

或者访问node.js中文网Node.js 中文网 (nodejs.cn)

通过cmd检查node.js安装是否成功

node -v

如果出现版本号信息说明安装成功，例如出现v16.13.0

npm是javascript的包管理工具,是和Node.js一起发布的，只要安装了Node.js，npm也安装好了

检查npm安装是否成功

npm -v

使用npm安装包示例

1	npm install <包名> [参数]

-g表示全局安装

淘宝npm 镜像(可选但推荐)

由于国内直接使用 npm 的官方镜像比较慢，所以这里推荐使用淘宝npm镜像

【2022-05-16更新】原淘宝 npm 域名即将停止解析 📢📢

即https://registry.npm.taobao.org即将停止解析

所以我们现在要用新的淘宝 npm 域名

（旧淘宝npm域名目前好像会自动跳转到新的npm域名，不过既然有新的还是趁早换了吧，之后可能会停止解析了，具体可看官网信息npmmirror 中国镜像站）

安装cnpm

安装命令如下

1	npm install -g cnpm --registry=https://registry.npmmirror.com

这样你以后就可以将npm替换成cnpm以加快下载速度

下文将同时提供npm和cnpm的命令，请自行按需复制

当然你也可以直接将npm默认设置为淘宝镜像地址

查看当前镜像源

1	npm config get registry

设置淘宝镜像源

1	npm config set registry https://registry.npmmirror.com

需要换回时改为官方的镜像源

1	npm config set registry https://registry.npmjs.org

全局安装vue和vue-cli

查看vue版本

1	npm list vue -g

vue -V我这边给的是vue/cli的版本😵‍💫

安装最新vue稳定版

1
2
3

npm install vue@next

cnpm install vue@next

安装vue-cli

还有个vite，不过我没试过，具体可以看官网安装 | Vue.js (vuejs.org)和开始 | Vite 官方中文文档 (vitejs.dev)

我还是先用接触过的vue-cli了

卸载老版本cli

1	npm uninstall vue-cli -g

安装脚手架

1
2
3

npm install -g @vue/cli

cnpm install -g @vue/cli

检查vue-cli版本

vue -V

然后在 Vue 项目中运行：

1	vue upgrade --next

搭建项目

搭建项目

1	vue create <project name>

<project name>换成你自己的项目名

然后会显示

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

选第三个

（第一个是使用Vue3默认模板进行创建；第二个是使用Vue2默认模板进行创建；第三个是自定义）

之后会显示

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

按需选择，比如Router和Vuex

空格选择、a全选，i取反

babel—-转码

typescript—-ts

Progressive Web App (PWA) Support—-支持渐进式Web应用程序（PWA）

router—-vue-router

vuex—-vuex

CSS Pre-processors—-css预处理

Linter / Formatter—-代码风格检查和格式化

Unit Testing—-单元测试

E2E Testing—-e2e测试

（有些勾选后，后面的也会有些配置选择，请视具体情况判断）

然后显示选择一个 Vue.js 版本，以便启动项目

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

选3.x

之后显示是否使用路由器的历史记录模式

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

输入Y

再之后显示

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

自动代码格式检测

这个具体的看vue脚手架创建项目时的 linter / formatter 配置选择_深海有鱼呀的博客-CSDN博客_linter vue

之后是语法检测方式

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

Lint on save(保存检测)

Lint and fix on commit(fix和commit时检测)

我选了第一个

接着是配置文件保存位置

1
2
3

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

In dedicated config files(单独文件保存)

In package.json(package.json保存)

我选了第一个

最后一个：问你需不需要把这些配置保存下来，下次好直接进行使用

1	? Save this as a preset for future projects? (y/N)

这个就完全看你的选择了

成功后会提示你类似于

1 2	cd <project name> npm run serve

输入这些命令就可以通过http://localhost:8080/

查看项目效果了

vue工程项目结构

引自vue3 项目结构，目录详解_小番茄夫斯基的博客-CSDN博客_vue3项目结构

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中