第一篇-使用vue-cli 创建Vue3项目

vue►vue3项目 , 评论

第一步：安装 nodejs

安装

已经安装可以跳过到 下一步

nodejs 官网地址：https://nodejs.org/zh-cn/download/

image-20210906093127268

长期维护版（即稳定版）下选择对应的操作系统点击即可下载，之后一直点击下一步，即可完成安装

安装完成后检查是否安装成功

打开命令行窗口

  • windows系统使用 win+R，之后输入 cmd
  • mac 用户，打开 terminal / 终端

输入 node -v 查看 nodejs 版本，输入 npm -v 查看 npm 版本

1
2
3
4
node -v
# v14.17.4
npm -v
# 7.21.1

显示对应的版本就表示安装成功

第二步：安装vue-cli

安装

已经安装可以跳过到 下一步

vue-cli 官网：https://cli.vuejs.org/zh/guide/installation.html

建议全局安装

在命令行执行以下命令，mac用户需要 sudo 执行

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后检查是否安装成功

命令行执行 vue --version

1
2
vue --version
# @vue/cli 4.5.13

看到正确的版本号，表示安装成功

第三步：使用脚手架创建项目

在命令行执行 vue create <app-name> 命令创建项目，例如，我现在创建一个名叫 cli-create-project 的项目，在命令执行

1
vue create cli-create-project
  1. 选择 preset

命令行窗口会提示请选择一个 preset，建议选择第三个 Manually select features，选择第一个或者第二个，创建的项目会比较简陋，只有 babel 和 eslint ，项目中必备的 vue-router 等的不会被创建，选择第三项（手动选择功能）,按上下键选择，回车键确认，进入下一步

image-20210906131900957

  1. 选择功能

    回车之后，命令行窗口就到了选择功能，按上下键切换功能，空格选中和取消选中，回车会进入到下一步。

  • Choose Vue version 必选，之后会选择使用Vue2还是Vue3

  • Babel 必选

  • TypeScript 选中之后，项目会安装typescript的依赖，建议是Vue2的话，就不用选了，Vue3的还是可以使用TypeScript的

  • Progressive Web App (PWA) Support 可选可不选，在项目中添加pwa支持， 会在项目中添加 Service Workers

  • Router 必选，在项目中安装 vue-router

  • Vuex 按照项目的需求来，会在项目中安装 vuex，一般不是很小的项目的话，都会用到的

  • CSS Pre-processors 一般都选，安装css的预处理器

  • Linter / Formatter 必选，安装 eslint 和一个格式化代码的工具会校验和格式化代码

  • Unit Testing 集成单元测试，看自己情况安装吧

  • E2E Testing 集成端到端测试，也是看自己情况安装吧

    image-20210906132940985

回车进入下一步

  1. 选择 vue 版本，这里选择3.x

    image-20210906133105077

回车进入下一步

  1. 选择是否使用类组件语法，Vue3的话就使用不了，输入 n 回车

    image-20210906133256064

  2. 选择是否使用Babel与TypeScript一起用于自动检测的填充，使用，输入 Y 回车

    image-20210906133459216

  3. 选择是否使用 history 模式的路由，是否都是可以的，我就选择使用，输入 Y 回车

    image-20210906133604983

  4. 选择一个 css 的预处理器，这里按照个人的喜好选择吧，我后续要添加 element-plus 的UI框架，所以就选择 Sass/SCSS (with dart-sass)，回车到下一步

    image-20210906134121436

  5. 选择一个 lint 和 一个格式化代码的工具，我比较喜欢用 ESLint + Prettier ，就选择这个了,回车到下一步

    image-20210906134325968

  6. 选择 lint 执行的时机，在保存时执行，或者是在代码提交的时候，需要自动修复，我不需要自动修复，就选择 Lint on save 了，回车到下一步

    image-20210906134616771

  7. 选择一个单元测试的工具，我用 Jest 比较多，这里就选择 jest，如果在第二步的时候，没有选择 Unit Testing，就没有这一步

    image-20210906134800340

  8. 选择一个端到端的测试框架，同样我用 Cypress，比较多，我就选择这个了，同样的，如果在第二步的时候，没有选择 E2E Testing，就没有这一步

    image-20210906135025225

  9. 选择一个存放插件（eslint、postcss、babel…）配置文件的位置

  • In dedicated config files 存放在单独的配置文件中，会在项目目录下生成 babel.config.js 之类的文件
  • In package.json 把插件的配置都写在 packgae.json 文件中

个人喜欢单独文件存放，就选择 In dedicated config files 了，回车到下一步

image-20210906135353240

  1. 是否要把这些配置保存为一个将来可复用的 preset。

选择 Y 的话，会把 preset 保存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。

不想保存的话就输入n，回车开始下载项目模版并安装依赖

image-20210906135726969

image-20210906140106508

image-20210906140547185

  1. 安装完成，进入项目目录

    1
    cd cli- create-project

    image-20210906140801601

这里默认安装的 vue、vue-router 、vuex 的版本都比较低，先升级一下版本

1
2
3
npm install vue@next vue-router@next vuex@next --save
#or 
yarn add vue@next vue-router@next vuex@next --save

image-20210906141259069

  1. 升级完版本之后，运行项目看一下是否可以成功运行
1
2
3
npm run serve
#or
yarn serve

启动成功

image-20210906141415245

在浏览器访问

image-20210906141513680

使用 vue-cli 创建 vue3 项目就成功了

完结

项目已经上传到 github 和 gitee

GitHub: https://github.com/wukang0718/cli-create-project

Gitee: https://gitee.com/wu_kang0718/cli-create-project

下一篇：在项目中添加 element-plus

武康前端开发

一个做前端开发的小学生