vue-cli3.0创建新项目

最新推荐文章于 2025-07-02 00:15:00 发布

原创最新推荐文章于 2025-07-02 00:15:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-cli3.0

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用vue-cli3.0创建项目的步骤。首先需安装node.js 8版本以上，接着安装vue-cli。创建项目时可选择预配置，有多种配置选项。创建完成后可进入项目、启动项目并打包上线。此外，还提到3.x版本精简了目录结构，可新建vue.config.js文件配置。

安装node.js

1.官网：https://nodejs.org/zh-cn/ 下载，8版本以上
2.命令行 node -v 检查是否安装成功以及检验版本号
3.命令行 npm install -g @vue/cli 或者 yarn global add @vue/cli 安装vue-cli;
4.命令行 vue -V 检查是否安装成功以及检验版本号

创建新项目

1.命令行 vue create app //创建名为app的项目
2.Please pick a preset: 选择预配置

第一次创建只有两项 default (默认配置) 和 Manually select features (手动选择)，以 手动选择 为例

3.Check the features needed for your project 可以自由选择用哪些配置，按上下键选择哪一个，按空格键选择与取消，所有的都选择好后，按enter键进行下一步。现对选项做简单介绍

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

选择了不同的配置，后续可能会有不同的操作提示例如：
Use history mode for router 路由模式
Where do you prefer placing config for Babel, PostCSS, ESLint, etc 配置文件放在那里，In dedicated config files独立文件和 package.json 一般选独立文件
Pick additional lint features 是否保存预配置
Save preset as 项目描述

4.命令行 cd app 进入项目
5.命令行 npm run serve 启动项目。
6.命令行 npm run build 将项目进行打包上线
7. 3.x版本中精简了目录结构，可以在根目录下新建一个vue.config.js文件，进行你的配置，具体配置看文档或者重新使用2.x版本