Vue-cli 3.0快速入门:10分钟搭建项目

0 下载量 173 浏览量 更新于2024-09-02 收藏 673KB PDF 举报
"10分钟上手vue-cli 3.0 入门介绍" Vue CLI 3.0 是一个强大的工具,用于快速搭建 Vue.js 应用程序。它提供了丰富的预设和配置选项,大大简化了项目的初始化过程。本文将详细介绍如何在10分钟内入门Vue CLI 3.0。 首先,你需要确保全局安装了Vue CLI 3.0。这可以通过运行以下命令之一完成: ```bash npm install -g @vue/cli # 或者 yarn add global @vue/cli ``` 安装完成后,你可以通过`vue create`命令创建一个新的项目。相比Vue CLI 2.x时代的`vue init`,新版本的命令更为简洁: ```bash vue create <project-name> ``` Vue CLI 3.0 提供了一些预设的模板,但你也能够手动选择所需的特性。例如,可以选择集成TypeScript、PWA、Vue-router、Vuex、CSS预处理器(如LESS)、ESLint + Prettier以及自动化测试等。在配置过程中,你可以根据实际需求进行选择。 在安装过程中,你还可以决定是否保存当前的配置,以便于未来快速创建类似项目。如果你不想保存,Vue CLI 3.0 会默认不记录当前配置。 一旦项目创建完成,你可以进入项目目录并启动开发服务器: ```bash cd <project-name> yarn serve # 或者 npm run serve ``` Vue CLI 3.x 的一个显著改变是它默认会打开浏览器,并在控制台显示应用的URL。项目启动后,你可以看到应用运行起来,与之前版本的体验相似。 Vue CLI 3.0 的项目结构比2.x更加简洁,移除了`build`和`config`目录,大部分配置被整合到了`vue.config.js`文件中。这个文件允许你自定义各种配置,比如输出路径、公共路径、webpack配置、开发服务器设置、PWA选项等。 例如,在`vue.config.js`中,你可以设置`publicPath`来指定静态资源的公共路径,`devServer`可以调整开发服务器的行为,而`configureWebpack`或`chainWebpack`则让你能深入定制webpack配置。 Vue CLI 3.0 的引入极大地提高了开发效率,让开发者能够更快地专注于编写核心业务逻辑,而无需花费大量时间在项目配置上。它的易用性和灵活性使得它成为现代Vue.js开发的首选工具。