[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可以在