从零开始学习idea开发vue

使用webpack脚手架开发vue必须基于nodejs

1. 下载nodejs https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi

2. 安装软件安装步骤进行，直到结束。

3. 测试nodejs是否安装成功 node –v

4. npm config set registry=http://registry.npm.taobao.org 配置npm镜像站

5. npm config list 显示所有配置信息
   idea下创建vue工程

6. 在idea中新建Static Web项目

7. 在该目录下使用cmd执行cnpm i -g vue-cli安装脚手架

8. vue -V测试是否安装，

9. vue init webpack projectName使用脚手架安装webpack

10. cnpm I 初始化项目此时项目已经建立好了。
    当我们在idea中创建好了一个vue脚手架项目后，我们来一块认识下它的目录结构
    
    我们的差不多工作都是在src目录下进行的，components是我们习惯性放自己开发的组件的地方，也是我们打交道最多的一个文件夹，router是我们将自己开发的组件进行绑定路由需要用到的一个文件夹，里面就那一个js需要使用，如果我们自己开发一些通用的js工具类时最好在src下新建一个util文件专门用来存放工具类。
    还有一个config文件夹，这个文件夹基本上就是项目创建后，我们配置一次，然后再也不会去管了。
    接下来我们讲一下npm的包依赖管理，npm的依赖管理是根据package.json来完成的，package文件中最常用的三个标签1. dependencies： 指定项目运行时所依赖的模块2. devDependencies： 指定项目开发时所需要的模块3. peerDependencies：指定当前模块所在的宿主环境所需要的模块及其版本。当这些添加完成后，我们使用npm install --save $package来安装运行时依赖的模块，npm install --save-dev $package来安装本地开发时所依赖的模块。
    这个完成后我们就可以在需要的地方使用import elementUi from ‘element-ui’引入插件，有些插件需要同时使用Vue.use(elementUi);才会生效，这个到底是为什么呢？
    原理vue的一些插件开发是有所不同的，而有些人喜欢将开发完的插件使用
    install:function(Vue){
    Vue.component(’ elementUi ', elementUi)
    }
    包装一下，而这些包装过的插件就需要使用Vue.use(elementUi);才会生效。
    接下来我再解决一个前后台分离所必须解决的问题后就可以进行项目的开发了。
    请看config文件夹，一共有三个文件，解决冲突主要是使用index文件，在index的module.exports中有dev标签，这个是我们开发导入数据的标签。
    
    还有两个文件，一个是dev.env这个文件是开发的一下常量，他们三个文件的格式都是差不多的，还有一个是prod.env这个文件是打包后引入的常量。
    好了，一切都准备好了，我们开始开发吧，我们的项目页面入口是最外层目录中的index.html,这个文件中基本什么都没有对吧，但是还是有个关键的东西，那就是id为app的div，记住，我们所有开发的页面最后都是在这个不起眼的div下面挂着的，我们js代码入口是src下面的main.js文件，在这中有一个new vue所有的开始都是这个地方，el代表挂载dom，router代表路由插件，先不要修改这个四个东西，以后我慢慢会告诉你，这个时候神奇的事情发生了，components中使用了app，而这个app在文件开头可以找到，使用了import导入，我们最后找到就是同级目录下的App.vue这个事情也告诉我们，引入vue组件时，我们可以省去.vue后缀，来看看这个文件中有啥，文件开头使用了<template>这种从来没见过的标签对，但是好在里面的东西我们都还熟悉，这个就是vue开发了，回头我会给你解释的，现在你可以仿照这个来进行尝试着开发了，新建一个文件，后缀为.vue，在文件头使用<template>在标签对中写入你今天需要完成的作业，写一个登录页，在<script>标签中仿照别人的例子，只是把名称改下，当一切都写完后，我们再回到App.vue中，在js区顶部加入import xxx from ‘./components/xxx’，在name下面添加components像图中。
    
    我们来看看一个很简单的ui框架，也是我们常用的页面框架。
    它的官网是element。
    我们可以直接查看它的快速上手，因为这是最适合我们的方式。
    对了忘记说了，template标签里必须只有一个根标签,在根标签的内部就无所谓了，
    Template是html的模板元素，你没看错就是html原生的，所以在里面定义各种东西你也就知道了是定义一些模板也叫组件，vue通过挂载这些模板来达到展示。
    关于vue实例化时里面的参数，你可以点击下面的连接vue。你有什么关于实例化不明白的，都可以查看api文档。
    是不是对下面的js代码很迷惑，为什么要有这个，由于之前我们定义过vue实例，我们做的项目又是单页面的，所以这个vue就是全局变量了，我们现在在js中写的就是用的vue api主要是对组件的名称进行定义，往后我们可能最常用的几个属性有data用于页面元素使用的变量，created实例创建的时候执行，mounted el挂载完成后调用，beforeDestroy销毁之前调用，destroyed销毁，methods方法，这里面已经包括了vue的生命周期了，created->mounted->beforeDestroy。容易混的是前两个，好像是差不多，实际上如果需要dom操作，必须在第二个里写，不然是没啥作用的。
    我们再介绍一个工具，你应该比较熟悉了，就是一个ajax，当然那是好几年前的产物了，我们现在有了更新的技术，就是axios，你可以向上面那样引入包，但是这个就不需要使用vue.use了，至于为什么，我希望你已经知道了，你要是现在想问我axios怎么用，说明你开始关心开发了，我可以给你一个网址axios，希望你能明白我不给你嚼碎馒头，我是想让你能自己学会捕捉你需要的东西，上面的网址结构很鲜明，你以后想用什么插件，只要nmp支持就可以把后面的axios改成插件名，然后查看用法。现在让我来告诉你，我们一般不是这么使用axios，因为前后端分离，经常开发时需要再它前面加些固定的东西，或者我们希望所有的请求都需要进行某个处理，比喻我们要过滤带错误码的请求，等等需求，导致我们需要把它的方法提纯出来，我们在src下面创建一个util包，在包里写一个处理请求的js，主要是使用Promise来封装axios，Promise是js6才有的新特性，关于它，可以参照百度百科js6新特性。可能这个东西有些深奥，我可以简单的对着代码给你解释下，你可以看return，我们实例化一个promise对象，在它的构造函数执行时需要执行它的executor函数，该函数使用构造函数传入的两参数resolve,reject，这两个参数本身又是函数，这个你不用吃惊，这个是js6独特支持的一种语法，如果你感兴趣可以自己搜搜，应该费不了多长时间，executor中会执行咱们的axios调用，当返回结果时会去主动掉response或者err，当这些被调用后会调用then中相应的方法（你不要被这个代码中的then搞糊涂了，这个是axios带的，其实我也不知道到为啥要用这个玩意封装一次，直接使用axios也行的，你可以自己研究研究）。

    export function post(url, data = {}) {
    return new Promise((resolve, reject) =>{
    this.$axios.post(url,this.$stringUtil.stringify(data),
    {headers: {‘Content-Type’:‘application/x-www-form-urlencoded’}})
    .then(response => {
    resolve(response.data);
    }, err => {
    reject(err);
    })
    })
    }
    你是不是明显感觉到节奏有点快，好多概念性的东西都不太清楚，没错我是站在很粗的方面给你讲，很多细节都得自己去把握，给你讲得东西里少了一个vue得语法，这个链接，可能比我要给你说的要详细的多了，但是你不用完全看完这个，可以粗略的看看左边的树行结构，知道大概有些啥，现在的你只要知道怎么绑定数据，就可以了，当你真正的进行开发的时候，有什么需求时，你可以回过头来看看这里都有什么样的解决办法。好了，我们来说说路由，这个是干什么呢？我们的vue是个单页面项目，但是页面是由不同的组件构成，我们的路由就是用来切换不同组件的，直接在App.vue文件中引入你写的页面，这样虽然能达到想要的效果，但是我们需要在三个地方进行更改，如果以后需要复用这个组件，你还是需要修改三次才行，为这解决这种情况，我们通常是使用路由功能的，我们可以打开之前给你介绍过的路由文件，里面默认是为我们导入了vue的，如果你没做过修改里面会有一个例子的。HelloWorld,我们要做的事情其实和这个差不多，把之前在App文件中写的三步的前两步放到了路由文件中，我们来看看路由文件，上面的我就步介绍了，从创建router实例开始说吧，我们看到实例的构造函数需要一个对象类型的参数，我们常用的是routes，它是个数组，组成数组的是对象，每个对象中常用的属性有path代表浏览器显示的路径，component代表引入组件名称，name代表暴露的名称以后可以用它来跳转，beforeEnter（to,from,next）方法进入路由前，经常用来做权限的判断。
    讲了这么多，现在开始说说怎么使用，我们一般需要将路由放到全局作用域，也就是在main.js中引入刚刚看到文件，然后一般还会Vue.prototype.$Router = router;来暴露给组件使用，实例化vue时添加上路由，这个一般都默认了，不用操作，当在组件中需要使用路由跳转时可以

    this.$Router.push({
    name: ‘XXX’,
    query: {
    参数名: JSON.stringify(参数值)
    }
    })

这样就完成了页面跳转。