vue-cli创建项目时由esLint校验导致报错或警告的问题及解决

目录
  • vue-cli创建项目时由esLint校验导致报错或警告
  • eslint语法限制项目报错解决

vue-cli创建项目时由esLint校验导致报错或警告

vue-cli创建项目后编写代码控制台一片黄

但不影响代码执行

但是看着就是很不爽啊

到网上搜索了一下这个问题,想起来初始化项目时安装了esLint校验工具

嗯,我看到了很多办法都是下面这样的

1、因为你设置了eslint,如果你不想有规范的js代码,可以重新初始化关掉eslint。

Use ESLint to lint your code? (Y/n) 这一步选no

在bulid/webpack.base.conf.js里面有配置如下:

module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),

点进config.dev.useEslint,发现在config/index.js里配置

useEslint: true, // 改为false即可。

2、万能方法,就是在报错的JS文件中第一行写上 

/* eslint-disable */
Use /* eslint-disable */ to ignore all warnings in a file.

简单粗暴有效率

but 本着 既然人家说我错了这个肯定是不好的啊我得改 这种良好觉悟

我觉得吧,还是应该直面错误勇于改正

so 针对所有的报错信息,进行了一一修改,果然长知识啊,哈哈哈 那我按照他的规范来写我岂不是enenenhahaha

我这是又在做什么梦[○・Д´・ ○]

进入正题,将遇到的报错信息整理了一下

1.ESLint:Strings must use single quote

字符串必须要用单引号引起来

2.Expected indentation of 2 spaces but found 4

eslint不喜欢tab缩进哦,缩进使用两个空格就可以,好的,我现在已经开始要改了~

如果实在是改不了呢,可以↓↓

修改eslint 配置文件 .eslintrc.js

rules: {
   ...
    // 缩进
    // 'indent': 2,
    // 'indent': [2, 2, {"SwitchCase": 1}],
    "indent": [1, 2],
   ...
 }

3.Missing space before value for key 'components’

这个就是强制属性值前也就是冒号后,习惯性的加一个空格,就可以避免这歌报错提示啦~

4.Newline required at end of file but not found

单文件组件最后的</style>后面要换一行,且只能一行,多了也会报错

其他的就不一一列举的,但是还有些要注意的

{},
{}

{},  {
}

注意:逗号后面也要加一个空格

好啦,以上就是我对这个规范的一些小小心得,后面再碰到再补充~

eslint语法限制项目报错解决

自己从网上找来个实战项目,npm install之后,启动项目,出现了下面这么多的警告和报错,一脸懵逼:

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

PS F:\vue.news-master> npm run dev

> vue.news@2.0.0 dev F:\vue.news-master
> webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 WARNING  Compiled with 2 warnings                                                                                                                         15:04:08

  ✘  http://eslint.org/docs/rules/indent                   Expected indentation of 0 spaces but found 1
  src\App.vue:15:1
   /*全局引入VueAwesomeSwiper轮播图插件*/
   ^

  ✘  http://eslint.org/docs/rules/spaced-comment           Expected exception block, space or tab after '/*' in comment
  src\App.vue:15:2
   /*全局引入VueAwesomeSwiper轮播图插件*/
    ^

  ✘  http://eslint.org/docs/rules/spaced-comment           Expected space or tab before '*/' in comment
  src\App.vue:15:2
   /*全局引入VueAwesomeSwiper轮播图插件*/
    ^

  ✘  http://eslint.org/docs/rules/no-unused-vars           'VueAwesomeSwiper' is defined but never used
  src\App.vue:16:8
  import VueAwesomeSwiper from 'vue-awesome-swiper';
          ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:16:50
  import VueAwesomeSwiper from 'vue-awesome-swiper';
                                                    ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:17:36
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment           Expected space or tab after '//' in comment
  src\App.vue:17:37
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More than 1 blank line not allowed
  src\App.vue:18:1

   ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:20:47
  import AppHead from '@/components/public/Head';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:21:47
  import AppMenu from '@/components/public/Menu';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:22:45
  import AppNav from '@/components/public/Nav';
                                               ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:23:47
  import AppFoot from '@/components/public/Foot';
                                                 ^

✘ 12 problems (12 errors, 0 warnings)

Errors:
  6  http://eslint.org/docs/rules/semi
  3  http://eslint.org/docs/rules/spaced-comment
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  http://eslint.org/docs/rules/no-unused-vars
  1  http://eslint.org/docs/rules/indent

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:40:36
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment  Expected space or tab after '///' in comment
  src\components\Select.vue:40:37
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:41:57
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
                                                           ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:43:58
  import { mapState, mapMutations, mapActions } from 'vuex';
                                                            ^

✘ 4 problems (4 errors, 0 warnings)

Errors:
  3  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/spaced-comment

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 WAIT  Compiling...                                                                                                                                        15:05:01
 95% emitting

 WARNING  Compiled with 2 warnings                                                                                                                         15:05:02

  ✘  http://eslint.org/docs/rules/no-unused-vars           'VueAwesomeSwiper' is defined but never used
  src\App.vue:16:8
  import VueAwesomeSwiper from 'vue-awesome-swiper';
          ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:16:50
  import VueAwesomeSwiper from 'vue-awesome-swiper';
                                                    ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:17:36
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment           Expected space or tab after '//' in comment
  src\App.vue:17:37
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More than 1 blank line not allowed
  src\App.vue:18:1

   ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:20:47
  import AppHead from '@/components/public/Head';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:21:47
  import AppMenu from '@/components/public/Menu';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:22:45
  import AppNav from '@/components/public/Nav';
                                               ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:23:47
  import AppFoot from '@/components/public/Foot';
                                                 ^

✘ 9 problems (9 errors, 0 warnings)

Errors:
  6  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  http://eslint.org/docs/rules/spaced-comment
  1  http://eslint.org/docs/rules/no-unused-vars

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:40:36
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment  Expected space or tab after '///' in comment
  src\components\Select.vue:40:37
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:41:57
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
                                                           ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:43:58
  import { mapState, mapMutations, mapActions } from 'vuex';
                                                            ^

✘ 4 problems (4 errors, 0 warnings)

Errors:
  3  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/spaced-comment

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 WAIT  Compiling...                                                                                                                                        15:05:05
 95% emitting

 WARNING  Compiled with 2 warnings                                                                                                                         15:05:06

  ✘  http://eslint.org/docs/rules/no-unused-vars           'VueAwesomeSwiper' is defined but never used
  src\App.vue:16:8
  import VueAwesomeSwiper from 'vue-awesome-swiper';
          ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:16:50
  import VueAwesomeSwiper from 'vue-awesome-swiper';
                                                    ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:17:36
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment           Expected space or tab after '//' in comment
  src\App.vue:17:37
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More than 1 blank line not allowed
  src\App.vue:18:1

   ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:20:47
  import AppHead from '@/components/public/Head';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:21:47
  import AppMenu from '@/components/public/Menu';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:22:45
  import AppNav from '@/components/public/Nav';
                                               ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:23:47
  import AppFoot from '@/components/public/Foot';
                                                 ^

✘ 9 problems (9 errors, 0 warnings)

Errors:
  6  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  http://eslint.org/docs/rules/spaced-comment
  1  http://eslint.org/docs/rules/no-unused-vars

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:40:36
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment  Expected space or tab after '///' in comment
  src\components\Select.vue:40:37
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:41:57
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
                                                           ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:43:58
  import { mapState, mapMutations, mapActions } from 'vuex';
                                                            ^

✘ 4 problems (4 errors, 0 warnings)

Errors:
  3  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/spaced-comment

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 WAIT  Compiling...                                                                                                                                        15:05:07
 95% emitting

 WARNING  Compiled with 2 warnings                                                                                                                         15:05:08

  ✘  http://eslint.org/docs/rules/no-unused-vars           'VueAwesomeSwiper' is defined but never used
  src\App.vue:16:8
  import VueAwesomeSwiper from 'vue-awesome-swiper';
          ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:16:50
  import VueAwesomeSwiper from 'vue-awesome-swiper';
                                                    ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:17:36
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment           Expected space or tab after '//' in comment
  src\App.vue:17:37
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More than 1 blank line not allowed
  src\App.vue:18:1

   ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:20:47
  import AppHead from '@/components/public/Head';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:21:47
  import AppMenu from '@/components/public/Menu';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:22:45
  import AppNav from '@/components/public/Nav';
                                               ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:23:47
  import AppFoot from '@/components/public/Foot';
                                                 ^

✘ 9 problems (9 errors, 0 warnings)

Errors:
  6  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  http://eslint.org/docs/rules/spaced-comment
  1  http://eslint.org/docs/rules/no-unused-vars

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:40:36
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment  Expected space or tab after '///' in comment
  src\components\Select.vue:40:37
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:41:57
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
                                                           ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:43:58
  import { mapState, mapMutations, mapActions } from 'vuex';
                                                            ^

✘ 4 problems (4 errors, 0 warnings)

Errors:
  3  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/spaced-comment

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 WAIT  Compiling...                                                                                                                                        15:05:09
 95% emitting

 WARNING  Compiled with 2 warnings                                                                                                                         15:05:09

  ✘  http://eslint.org/docs/rules/no-unused-vars           'VueAwesomeSwiper' is defined but never used
  src\App.vue:16:8
  import VueAwesomeSwiper from 'vue-awesome-swiper';
          ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:16:50
  import VueAwesomeSwiper from 'vue-awesome-swiper';
                                                    ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:17:36
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment           Expected space or tab after '//' in comment
  src\App.vue:17:37
  import 'swiper/dist/css/swiper.css';//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More than 1 blank line not allowed
  src\App.vue:18:1

   ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:20:47
  import AppHead from '@/components/public/Head';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:21:47
  import AppMenu from '@/components/public/Menu';
                                                 ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:22:45
  import AppNav from '@/components/public/Nav';
                                               ^

  ✘  http://eslint.org/docs/rules/semi                     Extra semicolon
  src\App.vue:23:47
  import AppFoot from '@/components/public/Foot';
                                                 ^

✘ 9 problems (9 errors, 0 warnings)

Errors:
  6  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  http://eslint.org/docs/rules/spaced-comment
  1  http://eslint.org/docs/rules/no-unused-vars

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:40:36
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                      ^

  ✘  http://eslint.org/docs/rules/spaced-comment  Expected space or tab after '///' in comment
  src\components\Select.vue:40:37
  import 'swiper/dist/css/swiper.css';这里注意具体看使用的版本是否需要引入样式,以及具体位置。
                                       ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:41:57
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
                                                           ^

  ✘  http://eslint.org/docs/rules/semi            Extra semicolon
  src\components\Select.vue:43:58
  import { mapState, mapMutations, mapActions } from 'vuex';
                                                            ^

✘ 4 problems (4 errors, 0 warnings)

Errors:
  3  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/spaced-comment

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

经过百度查询,原来eslint是一个语法检查工具,但是限制很严格,在我的vue文件里面很多空格都会导致红线(红线可以关闭提示),虽然可以关闭,但是在编译的时候老是会跳出来,所以能关闭是最好的了。

关闭方法:在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则:

module: {
  rules: [
    //...(config.dev.useEslint ? [createLintingRule()] : []), // 注释或者删除
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    },
    ...
    }
  ]
}

然后再重新运行一下npm run dev或者构建命令 npm run build就可以啦。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue eslint开发严格模式警告错误的问题

    目录 eslint开发严格模式警告错误 原因分析 解决办法 vue踩坑之eslint eslint开发严格模式警告错误 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... 原因分析 通过查看package.json文件我们可以发现,在文件中默认安装了eslint-loader模块,eslint-loader模块是目前相对比较流行的代码检测工具,可以检测书写的代码是否符

  • vue cli2 和 cli3去掉eslint检查器报错的解决

    目录 cli2去掉eslint检查器报错 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 cli2去掉eslint检查器报错 eslint在编写过程中及其严格,甚至单引号和双引号或者空格注释都会引起报错,导致项目无法正常运行 因此,只需要在build文件夹下,找到webpack.base.conf.js文件 将下面一行代码注释掉,即可正常编译了 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 实际上在学习过程中,你会发现eslint 检查特别讨

  • vue项目中Eslint校验代码报错的解决方案

    目录 vue Eslint校验代码报错 1.空格缩进,不让使用tab 2.未使用的变量报错 3.分号和引号问题 vue使用Eslint报错 解决办法很简单 vue Eslint校验代码报错 在使用脚手架创建Vue项目时,一般会安装Eslint插件,这个主要是校验代码格式和规范用的,但是它很有点让人抓狂,因为很多校验规则和代码规范,你只要不按照它的格式来,直接导致项目编译报错,运行不了项目,这个是非常令人讨厌的. 它不像idea里安装alibaba插件,校验代码规范只是会提示,并不会导致你项目都不

  • vue-cli创建项目时由esLint校验导致报错或警告的问题及解决

    目录 vue-cli创建项目时由esLint校验导致报错或警告 eslint语法限制项目报错解决 vue-cli创建项目时由esLint校验导致报错或警告 vue-cli创建项目后编写代码控制台一片黄 但不影响代码执行 但是看着就是很不爽啊 到网上搜索了一下这个问题,想起来初始化项目时安装了esLint校验工具 嗯,我看到了很多办法都是下面这样的 1.因为你设置了eslint,如果你不想有规范的js代码,可以重新初始化关掉eslint. Use ESLint to lint your code?

  • 使用vue-cli初始化项目时运行‘npm run dev’报错及解决

    目录 vue-cli初始化项目时运行‘npm run dev’报错 vue-cli初始化项目时运行‘npm run dev’报错 npm run dev 无法启动 0 info it worked if it ends with ok1 verbose cli [1 verbose cli   'D:\\Program Files\\nodejs\\node.exe',1 verbose cli   'D:\\Program Files\\nodejs\\node_modules\\npm\\b

  • Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

  • Vue UI创建项目详细步骤

    1.首先要安装最新的Vue CLI 在命令行工具里输入一下命令 npm install -g @vue/cli 或者 yarn global add @vue/cli 安装成功后,可用vue -V命令查看已安装的Vue CLI版本 2.在命令行运行 vue ui,就会出现图形化管理 在界面上可以看到第一个tab项目,点击创建这个tab ,可以来创建一个新的vue项目 3.点击了创建之后可以看到一下内容,可以项目创建一个目录或者选择一个目录,然后选择一种包管理工具:可以使npm,也可以是yarn等

  • Vue Cli 3项目使用融云IM实现聊天功能的方法

    介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二.引入融云IM 如图: 位置:public/index.html,引入 <script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三.可以正常使用

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

随机推荐