VUE环境设置教程以及VSCODE插件Vetur和ESlint的安装和配置

*本教程适用于Windows: 作者: Sinclair创建日期: 2018-10-09

下载地址:

（LTS代表长期支持版本，一般新手建议使用此版本，因为该版本使用最多的人，因此很可能找到解决问题的方法. ）

下载完成后，您可以直接开始安装. 接下来，当您选择安装路径时，可以制动制动器以选择所需的路径. 然后，您可以一直安装到完成，以指示安装已完成.

接下来vs安装插件，以管理员身份打开CMD，然后在打开的命令行界面中输入命令，然后依次按Enter键:

node -v
npm -v

如果正确输出版本号vs安装插件，则表示已安装我们的NodeJS和NPM，如下图所示:

（设置淘宝镜像: 众所周知，在中国直接使用npm的官方镜像非常慢，因此建议在这里使用淘宝NPM镜像. ）

以管理员身份打开CMD并输入打开的命令行界面:

npm install -g cnpm --registry=https://registry.npm.taobao.org

耐心等待下载和安装后，可以使用cnpm命令前缀代替默认的npm

以管理员身份打开CMD并输入打开的命令行界面:

cnpm install webpack -g

以管理员身份打开CMD并输入打开的命令行界面:

cnpm install vue-cli -g

为开发项目创建一个文件夹（例如d: \ projects \ vue），在CMD中输入以下命令以输入目录:

E:
cd E:\Vue\projects

基于模板创建Vue项目（例如vuedemo），然后在项目目录下的命令行界面中输入它:

请注意，项目名称不能大写，否则将报告错误

vue init webpack vuedemo

直到出现用于填写模板信息的屏幕:

输入作者姓名后，有3个选项，粗体是我的选择:

运行时+编译器: 建议大多数用户运行和编译

仅运行时: min + gzip轻约6KB，但.vue文件中仅允许使用模板（或任何Vue特定的HTML）-仅在运行时需要提供渲染功能

按如下所示填写整个模板信息:

依次输入以下命令:

cd vuedemo       (进入项目目录)
cnpm install    （安装项目依赖）
cnpm run dev    （执行项目）

vue运行时，您可以通过以下页面打开页面: 8080

出现以下屏幕以指示构建成功:

*以上是VUE环境的构建. 如果以上都不成功，则可以在下面忽略它，因为下一步是介绍VSCodede及其插件的安装方法

下载并安装官方网站链接:

安装vetur后，您需要添加以下配置:

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
},
"vetur.validation.template": false,

ESLint在安装后不可用，但需要一些环境和配置:

首先，您需要全局ESLint. 如果尚未安装，则可以使用CMD输入npm install -g eslint进行安装；

第二，vue文件是类似于HTML的文件，以便为vue文件支持ESLint，

eslint-plugin-html插件是必需的. 您可以使用CMD输入: npm install -g eslint-plugin-html进行安装；

在安装完上述两个之后，您需要在vscode中配置ESLint:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": ["html"]
    },

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-249667-1.html