vue散记:使用vue-cli搭建vue工程

8 篇文章 0 订阅

前言

咱不是专业搞前端的,之前也自己研究过 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. 工程目录

查看下已经下载好的工程目录:

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值