Vue 新手搭建项目 以及 基于 Vue cli 项目最佳实践（一）环境篇

新手接触 Vue 都有一个认识的过程，下面我为大家写出，我自己写项目的思路，一次次进步，修改形成的项目模板，为自己所在初创公司建立一些前端基础，仅供参考

一、环境

1. node 必须安装，无可厚非

https://nodejs.org/zh-cn/

2. 脚手架安装 (vue-cli3)

https://cli.vuejs.org/

npm install -g @vue/cli
# OR
yarn global add @vue/cli

二、创建项目

这里我认为读者已经了解 vue-cli 相关内容，这时我们打开命令行工具

操作提示：（上下箭头移动，空格选择，回车确认）

1. 创建一个名为 first-project 的项目

$ vue create first-project

2. 自动或手动配置

第一步完成回车之后，会弹出下面内容

image

忽略其他，第一次用的人会有两个选择如框中所示
我们选择第二个 Manually select features

3. 项目配置选择

我们选择常用的配置，如下

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

4. 详细配置

image

1. 路由模式不选择 history
2. css 预处理器选择 less
3. ESlint 检查风格 Standard
4. 保存的时候检查 ESlint
5. babel 配置项都放入 package.json
6. 是否保存为预设项目

接下去等待项目配置完成就好了

image

按照图中，直接 npm run serve 就可以运行项目了

下一章，将我们的项目结构改变，让我们的开发更科学，思路更清晰