前言
咱不是专业搞前端的,之前也自己研究过 Vue,跟着官网和菜鸟教程研究些语法,由于当时工作内容中用不到,也就没有做深入的研究。后来工作中引入了比较成熟的第三方前端框架,慢慢就被 Vue + Element 的组合给吸引了(不吸引不行啊,改个页面费老劲了)。之前使用 jQuery,觉得 Dom 驱动的方式也不错,但是比较深入地接触了 Vue 的数据驱动,发现这种方式其实更适合数据的构建流程,而且开发上会更快和更高效。然后就自己研究了下,这里只简单记录下使用 vue 脚手架构建vue工程的过程。
1. 基础内容
网上对于 Vue、Element、Vue-cli 的介绍已经有很多了,这里也不再搬运了,省得浪费大家的感情。这里就对自己的理解进行一下简单介绍。
1.1 Vue
1.1.1 核心:双向数据绑定
这个是与之前开发前端区别最大的地方,之前使用 jQuery,对于数据的操作,总是要通过页面的 Dom 去实现。比如给 id 为 name 的 input 组件设置一个值 $(“#name”).val("小红");
获取这个组件的值 $("#name").val()
。这种手动将 Dom 和数据绑定的方式,具有一定的灵活性,以页面元素为导向,但是缺点就是操作繁琐,需要自己考虑到所有页面改变时的情况。
而 Vue 就不同了,完全是另外一种开发模式和思维模式。使用 MVVM 的方式进行双向数据绑定,将 Dom 和数据自动地绑定到一起,不用人为干预,开发者在开发过程中只要考虑数据的改变就可以了,所有绑定数据的 Dom 自动改变状态。这种数据导向的开发模式,带来了更高效和更便捷的工作方式。
1.1.2 重拳:组件化开发
之前的页面开发,如 FreeMarker、JSP 中等,对于代码的复用,更多的是抽离出公共代码,形成单独的页面文件,作为复用的基础单元,但是这种复用实际上只是进行了页面代码的再组装,可以说是一种组件化的浅层次的、表象的应用,甚至可以说是一种单纯解决代码复用而实行的措施。
但是 Vue 就不同了,Vue 完全按照组件化的思想,通过模板的方式,将整个前端项目拆分成一个个组件,组件可大可小,可业务相关,也可作为业务无关的纯页面级组件,很是灵活。各个组件之间也可以任意组合、嵌套,为更加方便、自由地构建页面带来可能。
1.1.3 大长腿:前端工程化
最开始,用的 JSP 和 FreeMarker,没有前后端的分离,甚至可以说,前端就是几个页面。
后来,用到了 Bootstrap + jQuery,算是把前端给从后端里边拉出来了,对于前端的开发和发布也只局限于多个页面,或者说是页面集。
而在应用 Vue 系列技术的过程中,结合 webpack,很明显能够感受到 Vue 的工程化编程(之前咱还真没想到,前端还可以工程化)。这种工程化带来的好处就是,前端的代码各部分,功能更明确、更易维护,在开发思维方面会更兼具整个工程,而不是集中精力到某几个页面那样散,技术的引入以及问题的解决更具有广泛性和适用性(如 Axios 的拦截器,Vuex 的全局状态存储等)。这样的工程化,让前端工程更易管理、更易拓展,走得更远,走得更快。
1.2 Element
Element 是由饿了就吃热的饿了么的饿了么出品的样式组件库,使用方便,和 Vue 实现完全融合,而且组件种类多样,基本能满足大多数的业务场景。
Element 官网给出了很明确的使用方式,这里就不再多说了哈。
1.3 Vue-cli
Vue 脚手架。脚手架是干啥的,是用来快速建房子的工具,Vue 脚手架就是快速搭建 Vue 工程的工具,用来快速构建基础工程,将更多的精力投入到业务开发中。Vue-cli 推荐使用 Vue-cli2 以上版本,功能目录分类更明确。
2. 使用 Vue-cli 初始化工程
说明:Vue-cli 中的依赖,可以由 npm 或者 Yarn 进行管理,本 Chat 中使用 npm,请提前安装 Node.js。
2.1 安装 Vue-cli 脚手架
1. 新建工程目录:
2. 打开命令提示符,切换到该目录下:
3. 安装脚手架,执行命令:
npm install -g @vue/cli
安装过程需要耗费一点时间,请耐心等待一会。安装完了:
版本也显示出来了,为 4.4.4 版本。也可以通过下面的命令来查看版本:
vue --version
2.2 初始化工程
1. 执行命令初始化工程:
vue create score-system
执行后会提示:
是否切换到淘宝的下载服务器?是这样的,npm 的资源服务器在国外,下载资源的话,会比较慢,淘宝团队搭建了国内版的 npm 服务注册中心,并对外提供资源下载服务,有个命令可以了解下 cnpm。
这里选择 Y。
2. 选择工程基础配置:
这里选择手动配置,回车。
3. 选择要引入的工程配置
方向键上下键进行移动,空格选择,回车确定:
这里选择上面的几项。
4. 选择是否使用 history 模式:
这里选择 n,即使用 hash 模式。
5. 选择 CSS 预编译方式:
这里选择第一个 dart-sass。
6. 选择 ESLint 格式化校验方式:
这里可以选择第三个 ESLint + Standard config。
7. 选择什么时候进行语法检测:
这里选择保存的时候进行语法检测 Lint on save。
8. 选择这些设置的配置存放位置:
这里我们选择独立文件存放 In decicated config files。
9. 是否保存预设:
如果保存预设的话,那么下次可以直接进行使用,就不用再一步步选择了。
这里我们选择 y,并且为刚才的配置设置一个名称:
点击回车后,就开始下载工程文件了。这个过程还算是比较快的。
这样,就表示文件下载成功了。
10. 工程目录
查看下已经下载好的工程目录: