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

时间:2024-03-13 12:07:46

*此教程适用于Windows环境下  Author:Sinclair  CreateDate:2018-10-09

1.安装node.js

下载地址:https://nodejs.org/en/download/

(LTS代表长期支持版本,一般新手建议使用这个版本,因为这个版本使用的人最多,出问题能找到解决方案的概率较大。)

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

下载好后就可以直接开始安装,一路Next到选择安装路径就刹刹车来选择心仪的路径,然后就可以一路Install到Finish就表示安装完成了。

接着就使用管理员身份打开CMD,在打开的命令行界面,依次输入命令回车:

node -v

npm -v

如果正确输出版本号,说明我们的NodeJS和NPM就安装好了,如下图所示:

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

2.安装淘宝镜像

(设置淘宝镜像:大家都知道国内直接使用 npm 的官方镜像是非常慢的,所以这里推荐使用淘宝 NPM 镜像。)

使用管理员身份打开CMD,在打开的命令行界面输入:

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

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

3.安装webpack

使用管理员身份打开CMD,在打开的命令行界面输入:

cnpm install webpack -g

4.安装vue脚手架

使用管理员身份打开CMD,在打开的命令行界面输入:

cnpm install vue-cli -g

5. 开始创建VUE项目

建立文件夹为开发项目使用(如: d:\projects\vue ),在CMD依次输入下列命令中进入该目录:

E:

cd E:\Vue\projects

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

根据模板创建Vue项目(如 vuedemo),在已进入项目目录下的命令行界面输入:

需要注意的是项目的名称不能大写,不然会报错

vue init webpack vuedemo

直到出现这个填写模板信息的画面:

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

输入完作者姓名后接下来有3个选项,字体加粗的是我的选择:
Runtime+Compiler:recommended for most users 运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时

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

 

整个模板信息的填写如下:

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

 

依次输入以下命令:

cd vuedemo       (进入项目目录)

cnpm install    (安装项目依赖)

cnpm run dev    (执行项目)

vue跑起来后可通过页面http://localhost:8080 来打开页面

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

出现下面的画面则表示搭建成功:

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

*以上便是VUE环境搭建,上面的都还没成功的话,下面可以先不看,因为接下来是介绍VSCodede及其插件的安装方法


6.安装Visual Studio Code

下载安装官网链接:https://code.visualstudio.com/

7.在vscode中安装插件Vetur

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

安装完vetur后还需要加上这样一段配置:

"emmet.syntaxProfiles": {

  "vue-html": "html",

  "vue": "html"

},

"vetur.validation.template": false,

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

8.安裝插件 ESLint

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

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"]

    },

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

9.安装 vue-devtools

https://github.com/vuejs/vue-devtools

至此所有环境搭建以及插件安装完成,你可以Hello World 了 :)