经过一段时间对Vue的学习。觉得是时间来回顾一下所学成果了。所以在此开个专题系列随笔,回顾一下vue以及相关知识。
我在用Vue之前试过React,但是我真真受不了JSX这种语法。因为我是后端人员转前端。作为使用过jsp和servlet的人员。当我第一次看到JSX语法的时候,让我顿时想起了在Servlet中拼HTML代码时的恐惧,果断放弃了React。
当然。这是我自己的一点感受。在javaEE体系中。Servlet早于JSP,其实JSP就是另一种模式的Servlet,当时提出JSP就是为了解决在Servlet中拼接Html代码的痛苦。但是JSP最后还是会编译成Servlet。之后为了更彻底的解决这种痛苦,出现了freemark等一系列的框架,彻底摆脱了JSP。然而JSX的语法让我有一种开历史倒车的感觉。这一点上Vue的模板语法和React的Render方法对比很是明显。
三大前端框架,Vue, React, angularJs 2+ 。Vue以其简单易用的优点而广受好评,并且其社区也在火速发展,与其配合的第三方框架也在不断增长中。
其中有个vue-element-admin开源项目(https://panjiachen.github.io/vue-element-admin-site/zh/),是一个很好的基于Vue和ElementUI的后台管理系统模板,再次推荐一下。
这里咱们先不管这个大项目。先从Vue自身提供的一个模板说起。Vue提供了自己的构建工具vue-cli。可以快速的搭建一个脚手架项目。
npm install vue-cli // 安装vue-cli
vue init webpack myProject //初始化项目
vue-cli 提供的脚手架有多个。这里咱们选用webpack这个,因为大部分应该都是用的webpack,应用比较广泛。
此脚手架的构建结果结构如下:
下面大体介绍一下各个目录的功能。详细的介绍会在以后的章节中陆续介绍。
1. bulid: 此目录下有构建项目时使用的配置文件。
2. config:此目录下是项目的环境常亮配置,提供给build中的文件使用
3. src:项目的源码所在目录。
4 static: 项目的静态资源文件,其中的 .gitkeep文件是git使用的一个占位文件。
再说一下下面的几个文件。其实也不用说。基本都知道是干啥的。
1 .babelrc babel配置文件,详见(https://www.babeljs.cn/docs/setup/#installation)
2 .editorconfig 这个是为了统一不同编辑器的代码格式风格。
3 .eslinttrc.js eslint 的配置文件。详见(https://cn.eslint.org/docs/user-guide/configuring)
4 .postcssrc.js PostCSS 的配置文件。详见(https://www.npmjs.com/package/postcss)
5 index.html 项目首页的模板
6 package.json node使用的文件。
7 package-lock.json 用于锁定依赖的版本。可以参考(http://www.cnblogs.com/cangqinglang/p/8336754.html)这位兄台的解释。
8 .gitignore git的忽略文件列表
9 Readme.md 项目自述文件