基于Idea 构建 vue-cli 项目

写本篇文章的原因就是因为懒,懒得安装其他开发工具,懒得适应其他工具快捷键

准备工作

  1. 安装Nodejs(这里不详细举例)
  2. 安装idea 插件(这里是 NodeJs ,Vue.js 和 ESLint 这三个插件)
  3. 安装步骤:
    IDEA 中选择 File——Settings——plugins
    基于Idea 构建 vue-cli 项目_第1张图片

Vue.js 插件为 vue-cli 构建工具,让你只需下一步即可
ESLint插件为 JS 规则校验工具

  1. 其他设置项:
    设置JavaScript版本为ES6
    基于Idea 构建 vue-cli 项目_第2张图片
    设置JavaScript 代码风格
    基于Idea 构建 vue-cli 项目_第3张图片
    设置格式化快捷键
    IDEA Settings 界面 选择 Keymap,搜素ESLint, 选择Fix ESLint Problems 设置快捷键,我这里设置的是Ctrl+Alt+;没别的原因,只因为他是距离Ctrl+Alt+L 最近又不冲突的快捷键
    基于Idea 构建 vue-cli 项目_第4张图片

开始构建 vue 之旅

IDEA 选择 File——New——Project——Static Web ——Vue.js
基于Idea 构建 vue-cli 项目_第5张图片
接下来会有一系列的 next 这里就罗列到一起说明了:

Project name : 项目名称
vue-init :这里不能填大写字母
Project description 项目描述
Author 作者
Vue build 构建模式,一般默认即可;
Install vue-router?: 是否安装vue-router,选Yes
Use ESLint to lint your code?: 是否安装vue-router,选Yes,不然前面插件白装了
Pick an ESLint preset :ESLint 预设置,选择默认的 standard即可
Set up unit tests :有点类似于java的单元测试,Yes Or No 看情况
Pick a test runner :选择测试运行器 看情况
Setup e2e tests with Nightwatch? 不知道干啥的TT
Should we runnpm installfor you after the project has been created? (recommended) 推荐选 Yes

构建好项目之后 执行 npm install
基于Idea 构建 vue-cli 项目_第6张图片
之后 执行 npm start
基于Idea 构建 vue-cli 项目_第7张图片
当出现下图的访问地址就可以访问了
基于Idea 构建 vue-cli 项目_第8张图片
打完收工!
基于Idea 构建 vue-cli 项目_第9张图片

你可能感兴趣的:(vue)