vue 知识点整理——使用vue-cli 3.0搭建项目

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/cli -V // 可查询版本号 目前最新版是 3.8.4

创建一个项目：

vue create hello-world

##### 你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

image.png

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

image.png

webpack 相关：

在项目中创建一个vue.config.js文件，可以在文件中设置webpack相关配置

module.exports = {
  // 选项...
  outputDir:'todo', // 打包后文件名
  baseUrl: './', // 项目根目录
  devServer: {
      port: 8080, // 端口号
      open: true // 直接打开项目
  }
}