前言:

之前学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安装是否成功
1
node -v

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

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

检查npm安装是否成功

1
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版本

1
vue -V

然后在 Vue 项目中运行:

1
vue upgrade --next

搭建项目

  • 搭建项目
1
vue create <project name>

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

  • 然后会显示
1
2
3
4
5
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默认模板进行创建;第三个是自定义)

  • 之后会显示
1
2
3
4
5
6
7
8
9
10
11
12
13
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

按需选择,比如RouterVuex

空格选择、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 版本,以便启动项目
1
2
3
4
5
6
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

  • 之后显示是否使用路由器的历史记录模式
1
2
3
4
5
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

再之后显示

1
2
3
4
5
6
7
8
9
10
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

  • 之后是语法检测方式
1
2
3
4
? 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项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|-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文件中

参考文献

Vue3.0 起步 快速搭建项目(一)_奔跑的小蜗牛。的博客-CSDN博客

vue3创建项目_南有樛木。的博客-CSDN博客_vue3创建

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

vue3.0的创建 - 掘金 (juejin.cn)

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

最后

暂时就写到这了,如有错误,欢迎大佬留言指出😆

欢迎访问我的小破站https://www.226yzy.com/ 或者GitHub版镜像 https://226yzy.github.io/ 或Gitee版镜像https://yzy226.gitee.io/

我的Github:226YZY (星空下的YZY) (github.com)

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

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