VUE开发上手（02）——简单项目创建

本节开始，讲述VUE项目的创建。

首先，安装VUE
CMD下执行命令npm install vue -g

第二步，使用vue-cli创建项目
npm install -g vue-cli安装的是vue-cli2.x版本，创建项目使用的是CMD下命令方式。本文使用3.0版本创建项目，故应使用命令npm install -g @vue/cli，使用的是WEB UI方式创建项目。

第三步，启动项目UI
CMD下执行命令vue ui，打开Vue项目管理器：

第四步，创建项目
点击 在此创建新项目 开始创建项目。

• 填写项合适的目名称。
• 包管理器保持默认，或选择 npm。
• Git项目中选中 初始化git仓库。
  
  继续 下一步，在 预设 页面中选择 手动配置项目 项，下一步。

第五步，基础插件的安装

功能页中选择 Babel, Router 和 使用配置文件 项目，取消 Linter/Formater 的选择（ESLint的语法检查太严格，而且和我们通常写代码的习惯略有不同，作者大概是个强迫症患者，所以初学者不建议使用），下一步。

第六步，完成创建

Use history mode for router？ 项目保持不变，如果上一步安装了 ESLint ，此处建议选择 ESLint+Standard config，并选择 Lint on save。
点击 创建项目，保存预设的配置文件后，等待一段时间后，项目创建完成。

第七步，启动项目
项目创建完成后，进入项目管理界面：

左侧边栏中选择最后一项 任务 ，选择 serve，然后点击 运行 按钮。
完成检查后点击 仪表盘 选项卡中的 启动app 按钮。

至此，一个简单的vue项目就创建完成了。

备注：

• 如果采用CMD下命令行启动项目，需执行npm run serve命令，@vue/cli3.0创建的development模式名称为 serve，vue-cli 2.x创建的名称为 dev 。
• 如果创建项目时安装了ESLint，创建后想要关闭ESLint语法检查，可以在项目根目录下新建 vue.config.js 文件，然后插入节点lintOnSave: false。
  

相关文章
VUE开发上手（01）——基础环境配置