[vue] 从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织

[vue] 从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织

1 项目类型

前端的项目目前来看主要分为小程序开发，H5页面开发、PC官网、后台管理系统开发、Native开发。不同的项目所涉及的知识点和环境不太一样，但是很多方面是相通的。

1.1小程序

由于框架限定在Vue，所以这里指的是使用mpvue、WePY来开发小程序项目。

1.2H5页面

这里主要是指微信页面、Webview中的H5页面开发

1.3 PC官网

为什么单独划出来是因为官方的开发主要是用来展示企业信息、产品，对交互、体验有一定的要求，会有一些炫酷的动画效果。还有就是官网有可能需要采用SSR（比如Vue的Nuxt.js）来做，来确定良好的SEO。

1.4后台管理系统

后台管理系统主要功能在于数据的配置、权限的控制、数据报表的展示、日志功能等。通常又叫CMS，OA。

1.5 Native开发

这个通常就是指用前端技术去开PC应用、APP应用，比如Weex, Electron。

1.6 通吃型

比如uni-app， 可以一套代码编译成不同的平台源码。

不同的项目类型决定了其能够使用的生态、目录结构、特定的上下文。这里就以后台管理系统为例来说一下如何基于Vue来搭建一个项目。
注: 我只会玩这个，凑合阅读吧
基于@vue/cli的选型
后台管理系统中vue-router，vuex都是必选的，其它可以自行考虑。
ES6/7 or Typescript ?
鉴于目前Typescript如此流行，很多流行的框架和库都采用其来写，IDE友好的智能提示、强类型结束等，在立项时是否考虑采用Typescript来写Vue项目。如果采用Typescript，是不是很羡慕Angular中的DI注入，那可以考虑在大型项目中引入inversify这个库；在开发过程中遇到一些库没有声明文件要学会定义声明文件，这个是Typescript初学者最头疼的问题。

还有一个问题是团队中有多少人会Typescript，项目周期紧不紧，有没有时间来试错，踩坑。

Sass/Less/Stylus/PostCss ?
由于Vue项目开发本身样式自带scope，所以不需要像React那样去选css-in-js框架（目前在React最流行的是styled-components），但是如果我们在Vue中采用JSX的方式来定义组件，是否考虑引入vue-styled-components这个库（年久失修，完全脱节React版了，但依然是Vue中最好的选择）。在Vue中sass, less, stylus可以在<style>标签中通过lang=""来指定，如果你想使用PostCss也可以的，就是要自己花点时间去折腾一下。
关于代码规范和风格
这个主要的选择就是Prettier 和 Airbnb风格，如果配置不好，在IDE中满屏的红色波浪线和黄色的小灯光提示。

在配置eslint或者tslint时主要考虑的点是是否要写分号，未定义变量等问题。

关于测试

很多时间前端项目测试反而拖慢了项目的开发进度，但是在开源项目中良好的测试是保证项目质量的一个很重要方式。这里通常分为单元测试(Unit Testing)和端到端测试(E2E Testing)，更多信息我也没有什么经验，自行百度、Google。

通过 @vue/cli 生成项目后，接下来就是添加一些配置文件

通用配置

一个前端项目在开发过程中少不了各种框架、IDE的配置文件。前端项目的配置文件通常格式有xx.json、.xxrc、xx.config.js、xxconfig等方式。

2编辑器配置：.editorconfig

这里最重要的是缩进方式，及Tab大小，建议2个空格作用缩进。

https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

Git忽略文件配置: .gitignore

这里的配置决定了哪些文件会被版本控制所忽略

See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

2.1dependencies

/node_modules
/