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

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

1、环境

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

nodejs.org/zh-cn/

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

cli.vuejs.org/

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

2、建立项目

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

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

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

$ vue create first-project

2. 自动或手动配置

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

忽略其余，第一次用的人会有两个选择如框中所示 咱们选择第二个 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. 详细配置

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

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

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

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