Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过 @vue/cli 搭建交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
- 一个运行时依赖 (@vue/cli-service),该依赖:
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装:
使用 npm:
npm install -g @vue/cli
创建一个项目:
vue create hello-world
##### 你也可以通过 vue ui 命令以图形化界面创建和管理项目:
vue ui
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
webpack 相关:
在项目中创建一个vue.config.js文件,可以在文件中设置webpack相关配置
module.exports = {
// 选项...
outputDir:'todo', // 打包后文件名
baseUrl: './', // 项目根目录
devServer: {
port: 8080, // 端口号
open: true // 直接打开项目
}
}