vue项目搭建及总结

一、vue的两种安装方式

（1）直接在html中引入vue.js

（2）通过vue+nodeJS搭建

我们采用的是第二种方式

二、vue和nodeJS的关系

（1）nodeJS不是一个js框架，是一个基于Chrome V8引擎的javascript运行环境，所以会产生众多基于node的js框架和库，同时包括关于js模块化的库。另一个就是node可以创建本地服务器，从而可以使用js来编写后台程序。

（2）vue依赖node中的webpack打包工具，初始化vue项目，以及一些依赖包。

三、搭建vue项目

（1）安装node

（2）初始化vue项目，初始化命令：vue init webpack my-project

需要注意的是：node的版本需要和npm版本相对应

（3）初始化项目后，进入到project目录下使用命令npm run dev来启动项目。这个命令的执行是通过vue脚手架找到项目的根目录下的package.json文件，scripts表示脚本部分，作用是把webpack的原生命令进行 代理。其中build即是打包命令。执行了npm run dev则会启动端口，在开发

（4）vue目录结构，项目目录：webroot->vue->project

在build下的webpack.base.conf.js中可配置文件引入路径的别名，引入的公共文件路径可在这里配置，移动文件时只需要修改这一个地方，如：@表示src目录.

四、关于vue的几大知识模块

（1）vue路由

vue使用的是单页面路由，即所有组件都是渲染在一个容器中，页面跳转时不需要重新加载页面，只是重新渲染组件。在开发应用时，前端分配页面地址，包括实际路径地址、name、别名、重定向、组件名称，实际访问路径可以是别名也可以是真实路径

（2）vue双向数据绑定，使用模板语言

（3）vue的生命周期

beforeCreate：this无法使用，data数据、method方法都是无法获取的

created：可以操作vue实例中的数据和方法，但是无法操作dom结构

mounted：挂载完毕，dom节点渲染到页面中，能操作dom结构

computed：计算属性，vue经常会在模板中使用一些简单的表达式来控制值，所以复杂的逻辑应使用计算属性来进行控制。可快速计算视图中的属性，并且计算会被缓存，在需要更新的时候更新。提升页面性能。一般是当做属性来使用

watch：侦听属性，用来监听data中的数据变化，还可以监听函数的中参数来获取新值和旧值，和计算属性有些类似，通常用这个属性来响应数据的变化，监听ajax返回的结果。监听特定数据的变化并作出具体的业务逻辑。

（4）vue组件的开发和调用：注册组件使用.vue文件，使用export default将组件暴露出去，在父组件中import进来，并声明组件，在父组件中直接使用组件名称作为标签名即可使用子组件

（5）vue的权限控制：控制用户登录权限，控制用户角色权限，在页面加载前判断是否已登录，如果已登录再判断用户是否有权限