vue2.0项目搭建

1. 搭建vue项目

vue create xxxx(文件名/项目名称)

目前有 vue3.0 与 vue 2.0可供选择, 这里选择Manually select features可自己选择配置，看个人项目需求

空格键是选中与取消，A键是全选

TypeScript 支持使用 TypeScript 书写源码

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

装好后，启动
cd hello-world // 进入到项目根目录
npm install // 安装依赖
npm run serve // 启动项目

2. vue项目目录讲解

1、build：构建脚本目录

1）build.js ==> 生产环境构建脚本；

2）check-versions.js ==> 检查npm，node.js版本；

3）utils.js ==> 构建相关工具方法；

4）vue.config.js ==> webpack生产环境配置；

2、项目配置

1）.env.development ==> 开发环境变量；

2）.env.staging ==> 项目配置文件；

3）.env.production ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在index.js里面；

4）App.vue：根组件；

5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

3.vue代码

components: 组件的引用
mixins: 混入公用的代码
props: 接受父组件的传值
data: 当前组件的变量
methods: 当前组件的方法
computed: 计算属性

4. .vue文件代码

生命周期周期


beforeCreate 在实例加载之前触发
created 在实例加载完成之后触发
beforeMount 在页面元素加载之前触发
mounted 在页面元素加载完成之后触发
beforeUpdate date里的数据变换之前触发
updated date里的数据变换后触发
beforeDestroy 实例摧毁之前触发
destroyed 实例摧毁之后触发

页面引入组件
props: 接受父组件的的传参
$emit 触发父组件的方法
父组件在子组件上绑定方法, 在子组件出发这个方法的时候调用
mixins 混入代码
引入混用代码并且使用

// 混用代码
agency.js
export default {watch: {'$route': {deep: true,handler(val) {if (val.query && val.query.fieldName) {this.params[val.query.fieldName] = val.query.businessKey;};this.getList();},immediate: true}}
}