创作声明：本文作者为华南农业大学教师李康顺老师。转载至此仅为更好的查看和配置PHP环境
本文所需要的资源均上传至ftp服务器（ftp://higercorporation.cn），如有需要请和整理人李星海进行联系。
一、启动 idea2020.1.3 安装包
http://nodejs.cn/download/ 下载node-v14.15.4-x64
注意：很多小伙伴激活失败，很可能是之前老版本的遗留缓存导致的，在升级的时候，一定记住要给删除掉，否则，可能导致激活失败的情况~
继续点击下一步，启动 IDEA 2020.1, 启动成功后，我们可以看到 IDEA 新的欢迎界面如下:
二、开始激活
进去之后随便创建了项目
选择第一个选项创建项目
第一个是项目名称,随便写,第二个是项目的路径,创建完成后直接把下载的jar文件拖到idea界面即可
然后会自动重新启动一下IDEA软件,重启之后安装一下即可
破解完成之后查看使用期限
二、在 idea2020.1.3配置Vue
1安装步骤：
（如果原来已安装过，请先卸载原来已安装的所有操作
npm uninstall chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrivervue uninit webpack myprojectnpm uninstall –g webpack@2npm uninstall vue -gnpm uninstall -g vue-clinpm uninstall webpack@2 –g
）
安装npm
nodejs官网下载：https://nodejs.org/zh-cn/download/
下载安装最新的nodejs,根据自己电脑的系统位数选择32位还是64位
下载完成后运行该应用程序开始安装node,过程中一直点击next
特别注意安装过程中有下方图示选项，需要点击add to path这几个字母，字母背景变兰色即可，如下图，不要点击前面的+号，+号只是展开，后再点下一 步，然后一直next 直到完成
安装完成后 快捷键win+R 输入cmd 查看node版本：node -v，查看npm版本：npm -v,安装成功则可以查看到
在D盘创建一个目录project，并进入 d:\project
设置淘宝镜像：输入下方命令行
npm config set registry https://registry.npm.taobao.org
安装webpack （注意所有安装命令行不要输错，小心检查）
安装webpack（全局安装）——
npm install webpack@2 –g
安装vue.js
vue –V
-g 是表示全局安装 @2 是表示2.0版本
查看webpack版本——webpack -v
安装vue命令行工具（vue-cli脚手架）
vue-cli脚手架安装：
npm install -g vue-cli （i是install的简写）
安装最新vue.js——npm install vue -g(已安装可忽略)
查看vue.js 的版本——vue -V （注意后面的V是大写，需要安装完vue-cli脚手架之后才能查看的到）
2创建项目示例
进入到你打算放置项目的系统文件夹
第一步：vue init webpack myproject （后续按回车即可，也可 自己配置）
创建项目：
第一步：Project name: 输入项目的名称（项目名不能大写），回车
第二步：Project description：输入项目的描述，回车
第三步：Author：输入项目的作者（会自动生成到package.json文件里），回车
第四步：Vue build：这里有两个选项，选第一个（回车），
第五步：install vue-router：是否安装路由中间件，yes
第六步： Use ESLint to lint your code? (Y/n) ，No
第七步：Set up unit tests，yes
第八步：pick a test runner (回车)
第九步：Setup e2e tests with Nightwatch? (Y/n) yes
第十步：回车
注意：若是出现这个报错，是由于部分文件被国内网络墙掉，没有报下图红框中的错可以跳过下方的解决方法
解决方法 :输入命令行：cd myproject 进入到项目
然后输入命令行：
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
3安装插件：其实完成上面八步操作后 会自动导入项目模板，并且会自动下载相关依赖，安装完之后在项目文件夹中多了一个文件夹叫node_modules的目录
4启动项目：在命令行输入
npm start或者npm run dev 然后回车，在浏览器中输入http://localhost:8080
以上操作都是在npm 命令符 中进行
5 使用idea打开项目：首先安装idea（可到官网自行安装此处不详细叙述），安装好后打开idea点击左上角file菜单，点击open功能，选择你的项目所在文件夹myproject
点击OK，进入到项目中，点击底部的Terminal，即可进入到idea的命令行中
为了方便项目 代码编写，后续的项目命令执行操作不再cmd中，cmd中 先ctrl+c 输入Y回车结束掉，再在Terminal中执行命令npm start启动项目,启动完成在浏览器中http://localhost:8080/可以看到
后续主要组件的编写是放在src/components目录下
5打包部署：项目运行时可以点击加号新增一个命令窗口local(2)，执行npm run build命令，
打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了
6 idea中vue相关的调试及配置
点击file的settings进行配置
为了让vue中单文件组件中html高亮显示，file-settings-editor-hHTML-在file types 中的html 右下方的+号添加*.vue，点击右下方的apply
Javascript 配置版本为es6(已经是es6可忽略) 配置好后 ，点击右下方的apply
还是在 files-settings的界面做如下操作（注意：可以不操作，一般默认就是这个选项）
在idea中添加vue的单文件组件模板
<template>
<div >
</div>
</template>
<script>
export default {
name: '${COMPONENT_NAME}',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>将该模板放入下方图片中右边中间的模板区域
创建vue单文件组件，右键点击components目录
输入组件名称和文件名称，尽量两个名称保持一致，
7 调试
因为webpack的热更新功能，组件中代码的更改会实时体现在界面中，调试 以google浏览器chrome 为例；可以按F12 打开开发者工具
Element 是html元素，
console 为全局对象console中log(),err()等的输出区域，
network 为所有资源请求，最好勾选disable cache,避免浏览器缓存，XHR是ajax请求，可以查看http请求的结果，
后面还包含js,css,img等等，可以点击某一个进行相关的过滤，显示在下面的表格中
7 idea中如何运行vue程序HelloWorld.vue
第1步：src下的components下创建一个HelloWorld.vue，如下图:
代码如下：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2、在router下面的index.js中改为如下图（这里是路由对象，配置路由及组件对象）
代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
用google打开http://localhost:8080/#/HelloWorld网页运行
idea代码规范这里先去掉
下图可以不操作，因为安装的时候选的是No,没有安装EsLint
然后重新编译，npm start
8、将html文件和vue文件用http调用的方法
在 HelloWorld中加入mount()函数如下图
代码如下：
mounted () {
this.$http({
url:'',//接口地址
method:'get',//请求方式，还有post,put,等等
params:{
a:1
}//get请求时使用
// data:{
// a:1
// }//请求传递的参数，post请求时使用
}).then(data=>{
//data是返回的json数据，请求完成后可以拿到数据进行页面渲染
}).catch(err=>{
//err为请求失败的消息体
})
}
不使用变量的话，就是在div里面直接写就行了，页面就能响应
注意：调用顺序为：src—views—App.vue, 在 App.vue中 运行<router-view></router-view>, 然后转到src—router—index.js中的path:’/login’, name:’login’ keepAlive:false, 即执行src—views—login—login.vue登录login.vue
项目在其他电脑上运行前要安装项目依赖： npm install
报错了就根据报错信息安装对应的软件(比如python)
插槽的使用：https://blog.csdn.net/weixin_41646716/article/details/80450873
