Vue-cli（脚手架）

1.什么是Vue-cli（脚手架）？

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
Vue-cli官方文档

命令行操作步骤：(在cmd或者VScode集成终端中打开)

$npm install -g @vue/cli                          	安装vue脚手架
$vue -V                                         	测试是否安装成功
$vue create 项目名 （注意不要用中文和特殊字符）            创建Vue项目
$cd 项目名                                     	        进入创建好的项目文件夹
$npm run serve					        运行项目

备注:如果出现下载缓慢请配置请使用国内的npm 淘宝镜像：
$npm config set registry https://registry.npm.taobao.org
结合上一篇博客的单文件组件运行后结果展示:

注意:Vue-cli 5.x版本会出现语法错误:(组件的命名错误)

报错信息:vue eslint报错：Component name “School” should always be multi-word.eslintvue/multi-word-component-names
根据提示信息可知是组件名出了问题，报错信息翻译过来大概就是组件名”Student”应该总是使用多个单词拼接横线组成的。但是组件名也是可以使用单个单词的,只是官方文档上面的风格建议我们使用大驼峰或使用“-”衔接的方式而已。

解决方法:

方法一:那就是改组件的名字,这没什么好说的,
方法二:关闭语法检查的配置项(治标不治本)
- 我们在项目的根目录中找到(没有就自行创建)vue.config.js文件
- lintOnSave:false /*关闭语法检查*/
方法三:关闭命名规则校验(推荐)
- 在根目录下找到 .eslintrc.js 文件，同样如果没有则新建一个（注意文件前有个点），代码如下:
  //添加一行
  //在rules中添加自定义规则
  //关闭组件命名规则
  "vue/multi-word-component-names":"off",

文件内容如下:

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',
     //在rules中添加自定义规则
	 //关闭组件命名规则
     "vue/multi-word-component-names":"off",
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

以上是关闭命名规则，将不会校验组件名，官方建议设置是根据组件名进行忽略

忽略个别组件名:

// 添加组件命名忽略规则
"vue/multi-word-component-names": ["error",{
   "ignores": ["School","Student"]//需要忽略的组件名
}]

最后就可以运行成功了:

这篇博客引用了作者为”Wally94“的文章
原文链接为:CSDN