vue.js学习

（一）搭建vue脚手架：

工具：node.js、webpack、vue2x
步骤：
第一步：安装node.js(检测 node -v)
第二步：安装cnpm，使用淘宝镜像 输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org (检测 cnpm -v)
第三步：安装webpack，输入命令：cnpm install webpack -g(检测 webpack -v)
第四步：安装vue，输入命令：cnpm install vue(检测 vue -v)
第五步：安装全局vue-cli，输入命令：cnpm install -g @vue/cli-init
第六步：创建空文件夹存放vue项目
第七步：输入命令vue init webpack my-vue  回车，my-vue是我自己项目名称
第八步：输入之后就一直回车，直到出现是否要安装vue-route，这个我们在项目要用到，所以就输入y 回车，其他输入n
第九步：输入命令：cd my-vue 定位到自己的项目
第十步：输入命令：cnpm install 安装依赖
第十一步：输入命令：npm run dev 启动项目，出现localhost:8080 表示成功
第十二步： 浏览器输入localhost:8080

（二）vue项目结构：

• build：是webpack的配置目录
• config：vue项目的基础配置（webpack、node），端口号等
• dist：经过打包后的项目代码
• node_modules：npm加载的项目依赖模块
• src：主要开发目录
• static：静态文件（图片、文字、数据等）
• package.json：项目配置文件

 

（三）vue项目执行流程：

（四）使idea支持vue：

第一步：配置启动：点击edit configurations配置，点击加号，选择npm，Name为Run，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了

第二步：配置编译打包：继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。

第三步：安装插件：file --> settings --> plugins，键入vue.js 搜索，点击绿色按钮install安装，安装后需要重启idea。

第四步：创建模板：file-->setting-->editor-->file and code Templates，选择Vue File，可以默认模板内容，编辑完点击“ok”。 

第五步：创建vue文件：点击new找到Vue Component创建文件。

 

（五）名词定义：

• scoped：scoped是一个关键字表示是私有的，加上这个关键字后，即使两个组件写着一样的样式也不会冲突，程序会加上命名空间，这也就是为什么在script标签中有个name参数。
• props：在组件中props是专门用来暴露组件的属性接口的，把属性写在props里面，就可以暴露给其他页面调用了。
• $emit：触发机制，父组件监听，子组件触发。
• slot标签：相当于把img这块内容插到一个名叫icon的插槽里面去。

（六）Vue-router工作流程：

url发生改变==》触发监听事件==》改变vue-router里的current变量==》监听current变量的监视者==》获取新的组件==》

render新组件。

（七）vue生命周期：

内容有参考：https://www.cnblogs.com/qcloud1001/archive/2018/09/25/9700625.html