入门项目创建过程（第2章项目构建-）

完成Vue CLI脚手架的安装后，即可快速构建一个全新的Vue.js项目，包括可初始化项目的整体结构、依赖包、插件等相关工作。

构建项目时需要将文件放在计算机的某个硬盘中，但不建议放在C盘中。一般情况下，C盘是系统盘，如果系统盘出现问题，文件基本上很难找回来，除C盘之外的其他盘均可。由于构建项目的步骤比较多，下面将构建项目的整体过程做成一张图片，查看文章底部。

（1）创建项目：在终端运行vue create vue3-element-plus-admin命令，新建一个项目。vue create是固定语法，vue3-element-plus-admin是自定义的项目名称，也是生成的目录名称，按回车键后稍等一会儿便会进入下一步动作。

（2）Please pick a preset: (Use arrow keys)：“请选择预设类型：（使用箭头选择）”，我们选择“自定义选项安装”，并按回车键。

◎ Default (Vue3 Preriew)：默认，仅安装 babel和eslint。

◎ Manually select features：自定义选项安装。

（3）Check the features needed for your project：使用空格键选择需要的依赖包，“*”为所需要的依赖；Vuex和Router是必不可少的依赖包及CSS编译器。本书的项目主要利用JavaScript开发，如果你熟悉TypeScript，也可以选择使用它来开发，选择完成后按回车键。

◎ Babel：编译，由ES6 编译为 ES5。

◎ TypeScript：JavaScript的超集。

◎ Progressive Web App (PWA) Support：渐近式Web应用。

◎ Router：路由。

◎ Vuex：状态管理器。

◎ CSS Pre-processors：CSS预编译器。

◎ Linter / Formatter：代码检测及格式化。

◎ Unit Testing：单元测试。

◎ E2E Testing：端对端测试。

（4）Choose a version of Vue.js that you want to start the project with？：选择要启动项目的Vue.js版本。本书中所提到的知识点都是Vue.js 3的知识点，这里选择3.x即可。

◎ 2.x：Vue.js 2版本。

◎ 3.x：Vue.js 3 版本。

（5）Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)：是否使用history路由模式。这里输入“n”，并按回车键。

（6）Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)：CSS编译模式。本书采用dart-sass，选择后按回车键即可。

◎ Sass/SCSS (with dart-sass)：Sass dart-sass编译模式。

◎ Sass/SCSS (with node-sass) ：Sass node-sass编译模式。

◎ Less：less编译模式。

◎ Stylus：stylus编译模式。

（7）Pick a linter / formatter config: (Use arrow keys)：代码规范。选择“ESLint Prettier”，然后按回车键。

◎ ESLint with error prevention only：仅预防错误。

◎ ESLint Airbnb config：Airbnb配置。

◎ ESLint Standard config：标准配置。

◎ ESLint Prettier：格式化形式。

（8）Pick additional lint features：代码检测方式。选择“Lint on save”，然后按回车键。

◎ Lint on save：保存时检测。

◎ Lint and fix on commit：提交时检测。

（9）Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)：选择项目配置文件的存放方式。选择“In dedicated config files”，然后按回车键。

◎ In dedicated config files：单独保存在各自的配置文件中。

◎ In package.json：保存在package.json文件中。

（10）Save this as a preset for future projects?：是否将以上配置进行保存。如果选择保存，则在下次构建项目时可以使用已保存的配置，无须再一步步地选择配置。

◎ y：保存（输入存储名称）。

◎ n：不保存。

（11）Pick the package manager to use when installing dependencies: (Use arrow keys)：项目的依赖下载来源。第一次构建项目时，可能会出现“项目依赖下载来源”选项，选择其一即可，本书采用的是 NPM。

以上配置完成后便开始构建项目。构建项目需要时间，等项目构建完成后会显示“Successfully created project vue3-element-plus-admin.”，表示vue3-element-plus-admin项目构建成功，之后可根据指令进入项目，并执行npm run serve指令运行项目。项目运行成功后，我们会看到Local和Network两个访问项目的地址，复制其中一个地址到浏览器的地址栏即可访问该项目。

「链接」

获取文本资料：https://item.jd.com/13443805.html

,