欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

从零开始搭建一个规范的vue-cli 3.0项目

程序员文章站 2022-07-05 23:41:52
在这一集我们将讲到如何从安装vue-cli开始,到新建一个本地项目,再到vscode中关于eslint的配置,以及本地项目关联公司远程项目的基本操作。 一,初始化本地项目 1,首先,全局安装vue-cli 3.0 2.检查vue-cli的版本,确定是3.0以上 3,新建一个叫question-edi ......

在这一集我们将讲到如何从安装vue-cli开始,到新建一个本地项目,再到vscode中关于eslint的配置,以及本地项目关联公司远程项目的基本操作。

 

一,初始化本地项目

1,首先,全局安装vue-cli 3.0

从零开始搭建一个规范的vue-cli 3.0项目

 

2.检查vue-cli的版本,确定是3.0以上

从零开始搭建一个规范的vue-cli 3.0项目

 

3,新建一个叫question-editor的本地项目,注意这里的配置,预设置选择手动,勾选必要的babel,router,css预处理器,linter格式化工具。不选择历史模式,css预处理器的选择看个人喜好,scss和less其实语法区别不大,而eslint的配置选择airbnb(在eslint的官方地址中star数高居第一,远超prettier和standard的存在),选择在保存时自动lint,独立放置配置文件,即可等待其初始化完成。

  (顺便吐槽一下,在windows系统中的git bash方向键有问题,所以这里才用回自带的powershell来建项目)

从零开始搭建一个规范的vue-cli 3.0项目

  说一下历史模式这个问题,关于历史模式和哈希模式的区别不仅仅是有没有#号这么简单,历史模式还带来了关于二级菜单刷新出现404,重定向等问题,而哈希模式在url中仅仅是多了一个#号,就可以避免历史模式的所有缺陷,以及提供低版本浏览器甚至是ie的支持!所以在此墙裂不推荐使用历史模式。

 

二,在vscode中配置eslint

1,首先,我的vscode一开始在插件方面以及设置方面如下,可以看到是非常简单的,插件只有一个汉化工具、代码提交者追查工具、代码特效工具、.vue文件语法高亮工具。而在setting.json中,仅仅是配了颜色主题、shell终端、代码烟花特效而已。

从零开始搭建一个规范的vue-cli 3.0项目

 

2.抛弃vetur格式化功能。

  在这个时候,如果我们在一个vue文件中,书写一些代码如下,会发现是可以格式化的。

  从零开始搭建一个规范的vue-cli 3.0项目          从零开始搭建一个规范的vue-cli 3.0项目

  如果你对eslint的airbnb有所了解,那么你一定知道它有两条大名鼎鼎的规矩:第一,字符串必须为单引号;第二,函数语句不必加分号。

  而在我们执行完格式化后(快捷键alt+ctrl+f),这两个规矩都被破坏了,产生这种现象的原因是vscode默认是不支持vue文件的格式化,而vetur插件自带了格式化工具。所以在vue文件中执行格式化操作的时候 ,先在vscode自身找格式化工具,找不到就到插件中找,然后在vetur里面找到了,然后执行vetur自带的格式化标准。

  而vetur的格式化标准叫做prettier,这玩意跟airbnb标准是不太一样的。可以在设置中验证这一点。

  从零开始搭建一个规范的vue-cli 3.0项目

  所以我的建议是,vetur就仅仅是作为一个语法高亮工具,能给vue文件上点颜色,就行了。至于代码格式化这件事情,就不要来参与。在设置中把vetur的“特权”给禁掉。

  从零开始搭建一个规范的vue-cli 3.0项目

3.让所有的格式化工作都交给eslint插件去完成。

  然后就可以安装eslint插件,安装这承载着全项目格式化希望的关键插件。

  从零开始搭建一个规范的vue-cli 3.0项目

  安装完成后,我们需要配置一下eslint的validate(也就是eslint在哪儿生效),setting.json更改如下:

       从零开始搭建一个规范的vue-cli 3.0项目

  现在来试试效果:

  从零开始搭建一个规范的vue-cli 3.0项目                   从零开始搭建一个规范的vue-cli 3.0项目

  哦对了,在windows还会遇到expected linebreaks to be 'lf' but found 'crlf'这个问题,这是因为不同的操作系统对于换行符的定义不同,windows是回车换行(cr+lf),而在linux和unix中是简单换行(lf),默认为lf。至于换行这件事情,不止和操作系统有关,有时候不同的编辑器也可能导致换行符的问题,而这些所谓的“换行问题”并不会反映到代码中,你根本看不着这东西,所以在eslintrc.js中,把换行检测关闭就可以了。

  从零开始搭建一个规范的vue-cli 3.0项目

 

三,线上对接项目(gitlab)

  1,在gitlab中新建一个项目,这时候会发现,项目名称会带有个人用户名前缀:

  从零开始搭建一个规范的vue-cli 3.0项目

  这当然是不科学的,因为我在新建的是一个公司的项目,而不是个人项目,出现这种尴尬的现象是因为在gitlab群组中,分为三个角色:

  owner(群主,拥有所有权限) -->maintainer(管理员,可以新建组内项目)--> developer(开发者,只负责开发);

  好吧,我是developer,所以我去找了个maintainer同事来帮我建项目

  从零开始搭建一个规范的vue-cli 3.0项目

  现在项目已经被同事建好了,我现在要做的就是把本地仓库和远程仓库进行关联。

  复制一下项目的ssh key,回到本地项目看看本地的状态。

  从零开始搭建一个规范的vue-cli 3.0项目

  把远程仓库与本地仓库相关联的命令是git remote add origin <一个项目的ssh地址>,而第一次推的时候加上-u参数是为了把本地master分支与远程master分支相关联,有关git的更多内容请移步至廖大大的官网,这里不详细讲各种git操作了,附上地址:

  从零开始搭建一个规范的vue-cli 3.0项目

  打开gitlab,发现已经推上去了。

  当然,要让这个项目真正在线上运行,根据我们的每次代码提交可以看到最新的线上内容,我们还要搞一下ci,这个下一集在讲如何手撸ci。