vue创建项目----随便写写

NIIBLE
121 阅读4分钟

这是一篇无聊的小白文章。

首先自己安装的是vue-ceil3，使用的命令是vue create，如果想要2.0版本可以用 vue init ，所以在创建项目时根据个人喜好吧。
自己选择的是手动选择功能，也就是：

image.png
接下来就是你可以根据自己项目来选择你要的工具啦！！！

注意按 空格键 选择哟

image.png
接下来就是要你选择哪个版本的vue啦。
image.png
这里选择的是，错误检查配置。
Eslint就不用说了吧，代码校验+Prettier 格式美化
自己先择的是下图选项，根据自己习惯来。
image.png
接下来说的是什么时候可以去检查呢？
image.png
lint on save

代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error

lint and fix on commit

代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。

配置文件保存： 这里选择了 In addtional config files (放在单独的文件里)

image.png

是否保存本次配置呢？

image.png

好啦。至此项目也就创建完成啦。

启动篇

接下来也就是 cd 到你的项目目录里，然后npm run serve启动啦。用vue init 创建的小同学要用 npm run dev 哦！

点火，启动项目！

接下来就是我遇到的小问题啦。
首先就是 ...跟你的Tab符号的问题啦。
具体报错样子是这样子滴！

image.png
我的解决方法是 在 .eslintrc.js 文件中的 rules下添加：

"prettier/prettier": "off",

上面方案是关闭和忽略组件名规则，但是有时候还是需要团队有个共同规范，不能关闭，同时文件名可能和组件名不一致时，例如我需要每个页面入口为index.vue,但是组件名为MyHome,用忽略组件名的方式可能需要同时添加index和MyHome,就显得很傻瓜。或者我需要路由组件忽略，非路由组件不忽略，那如何在这种情况下修改规则更好用呢？我找到了现在这种方式。上面是根据组件名忽略，现在是根据文件进行关闭规则，更适用。

关闭某文件命名规则校验 在根目录下找到 .eslintrc.js 文件，同样如果没有则新建一个（注意文件前有个点），代码如下

在文件的overrides中添加如下代码：

{  
 files: ['src/views/index.vue','src/views/**/index.vue'],   // 匹配views和二级目录中的index.vue
 rules: {
 'vue/multi-word-component-names':"off",
 } //给上面匹配的文件指定规则
}

其中的 files: [] 是用于匹配文件的，*号代表所有文件。index.vue也可以改成 *.vue，这就是匹配目录下的所有vue文件

文件内容：

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  overrides: [
        //这里是添加的代码
        { 
          files: ['src/views/index.vue','src/views/**/index.vue'],     
          // 匹配views和二级目录中的index.vue
          rules: {
          'vue/multi-word-component-names':"off",
          } //给上面匹配的文件指定规则
        },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

还有其他方法

解决方案1

因为prettier默认规定换行格式为LF,所以才会报错。
在prettier.config.js配置中，添加忽略换行格式的检查。

**

endOfLine: 'auto'

解决方案2

根据分析问题的愿意可知，这一切都是git导致的（git会自动将lf转为crlf）
好在git暴漏了这个配置项core.autocrlf，我们可以通过修改此属性，将全局autocrlf设置为false。

**

git config --global core.autocrlf false

推荐操作

因为换行格式不同，不会影响项目的运行和编译，但是却会每次提交，都导致大量的代码冲突。
所以我们要做的是，本地忽略换行格式的要求，而提交的时候，统一拦截，修复成lf格式。
即方案1+方案2

接下来又出现错误

在组件命名的时候未按照 ESLint 的官方代码规范进行命名，根据 ESLint 官方代码风格指南，除了根组件（App.vue）以外，其他自定义组件命名要使用大驼峰命名方式或者用“-”连接单词进行命名；
第一种方法当然你就是 顺着他来咯，根据规范命名。
第二种还是在 .eslintrc.js文件中的rules添加

"vue/multi-word-component-names":"off",

关闭，重新启动项目。。。。(个_个)，没问题鸟。

image.png

先写到这里吧！以后又遇到问题再添加吧。

avatar
文章
阅读
粉丝