1、idea安装和配置：
idea下载地址：/idea/download/#section=windows
安装时的设置：
2、安装vue.js：
（1）安装：
在Plugins中安装插件，搜索vue.js，然后install。
（直接在Plugins的Marketplace中搜索有时会提示没有网络连接，后来我先是用idea中随便打开了一个html文件，然后Files->Settings->Plugins就可以正常搜索到，并安装了）
（2）语法提示：
参考自：/maggieq8324/p/11458752.html
File->setting->Editor->Inspections，右侧找到HTML->Unknown HTML tag attribute，在右边Options->Custom HTML tag attributes里面添加如下代码:
@tap@tap.stop@tap.prevent@tap.once@click@click.stop@click.prevent@click.once@change@change.lazy@change.number@change.trim@on@blur@fous@submitscopedv-modelv-model.numberv-model.trimv-forv-textv-htmlv-showv-ifv-else-ifv-elsev-prev-bindv-bind:classv-bind:stylev-bind:idv-bind:href
3、创建项目、项目结构及简单的使用：
（1）创建vue项目：
新建项目，选择Vue.js：
填写项目名称等后，会进入项目构建和必要模块的下载，如npm。如果像我一样npm没有安装，那就会等待较长的时间，安装过程会询问是否使用淘宝镜像进行安装，请务必选择yes：
安装完以后，npm就会出现在右上角了：
如果没有出现npm，那就需要点开来手动添加创建一个。
点击小三角运行这个web项目：
按照提示，浏览器打开192.168.1.5:8080/：
哈哈，然而里面什么也没有。
（2）目录结构：
这段部分来自菜鸟教程。
//目录/文件说明build //项目构建(webpack)相关代码。config //配置目录，包括端口号等。node_modules //npm 加载的项目依赖模块。src //开发的目录，里面包含了几个目录及文件：//assets: 放置一些图片，如logo等。//components: 目录里面放了一个组件文件，可以不用。//App.vue: 项目入口文件，可以直接将组件写这里，而不使用 components 目录。//main.js: 项目的核心文件。static //静态资源目录，如图片、字体等。test//初始测试目录，可删除.xxxx文件//这些是一些配置文件，包括语法配置，git配置等。index.html //首页入口文件，可以添加一些 meta 信息或统计代码。package.json //项目配置文件。README.md//项目的说明文档，markdown 格式
（3）vue项目中app.vue、main.js和index.html的关联：
资料来自：/yeyeyemax/p/6959215.html
main.js：是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。
使用：
import Vue from 'vue'import App from './App'/* eslint-disable no-new */new Vue({el: '#app',template: '<App/>',components: {App }})
App.vue：是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件
使用：
<template><div id="app"><img src="./assets/logo.png"><hello></hello></div></template><script>import Hello from './components/Hello'export default {name: 'app',components: {Hello}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>
（4）简单的修改：
打开src->components->HelloWorld.vue，修改export default：
（代码为name提供了一个string内容）
<script>export default {// name: 'HelloWorld',// props: {// msg: String// }name: 'hello',data () {return {msg: 'hello,这是一个vue项目！'}}}</script>
运行项目：
4、引入bootstrap：
先下载好bootstrap，下载地址看以前的文章，放到项目目录后，然后在mian.js中添加代码：
import '/public/bootstrap/bootstrap.min.css'//路径一定要对准，使用idea的话输入路径会有提示，前面的 / 号不要漏
使用时，如在hello.vue中添加一个绿色按钮的代码：
<button type="button" class="btn btn-success">按钮</button>
