vue 个人学习记录

Vue脚手架搭建过程

1. 检查 vue-V 判断当前设备是否有vue环境，如果没有，就执行npm install -g @vue/cli
2. 再次检查vue-V 看是否创建成功
3. 创建vue项目的途径 有 vue ui (vue自己的图形界面化的工具)，第二个是vue create 【项目名】
4. 在使用命令创建时，会问你一些问题，一路回车默认创建即可
5. 创建完成后 ，会提示你进入相应的项目目录，执行npm run serve 启动目录，等待启动完成后，就可以看到vue的logo了，此时代表项目创建成功
6. 项目中，src文件夹是我们的源文件夹，所有的代码编辑工作在这里完成
7. vue项目是一个spa项目，即全局只用一个vue页面，其他内容通过组件或路由的方式来进行引入
8. 在src的文件夹创建router文件夹，里面新建一个index.js文件，这里掌管整个项目的路由配置，需要在main.js中进行相关配置
9. 当项目路由配置完成后，我们需要引入相关依赖，（这步可以在第八步之前做）在当前项目下面运行cnpm install vue-router --save
10. 如果你的项目需要用到 ajax，那你需要添加另外一个依赖，cnpm install axios --save 并且要在main.js 中进行注册

vue项目引入第三方样式库，bootstrap

1. cnpm install bootstrap@3 --save 卸载：cnpm uninstall bootstrap

2. cnpm install jquery --save

3. 在项目的根目录中，与package.json同级，创建一个vue.config.js，内容如下

   const webpack = require('webpack')
   module.exports = {
   	chainWebpack: (config) => {
   		config.plugin('provide').use(webpack.ProvidePlugin, [{
   			$: 'jquery',
   			jquery: 'jquery',
   			jQuery: 'jquery',
   			'window.jQuery': 'jquery'
   		}])
   	},
   	css: {
   		sourceMap: true
   	}
   }
   
   

4. 在页面中的script标签中写两句代码，完成引入

   import 'bootstrap/dist/css/bootstrap.min.css'
   import 'bootstrap/dist/js/bootstrap.min.js'
   

Vuex 搭建过程 以及项目结构

概念：Vuex是专为Vue.js应用程序开发的状态管理模式（提供了可公用的参数），主要采用的是集中式存储管理应用的所有组件状态 （响应式）

主要的应用场景

​ 多个视图依赖于同一状态

​ 来自不同视图的行为需要变更同一状态

• state 数据仓库，驱动应用的数据源
• mutations 提供修改数据仓库的方法 （同步）
• getters 提供获取仓库内容的方法
• actions 提供了异步操作，基于mutations来进行操作

如果要在项目中使用Vuex的话，在当前目录下安装vueX cnpm install vuex --save

1. 在main.js中引入vuex import Vuex from ‘vuex’
2. 在项目中创建一个store文件夹
   1. index.js 是vuex的核心文件，这里赋值vuex对象的配置
   2. state.js 仓库的配置，当前应用需要共享的数据都可以在这里声明
   3. mutations.js 修改具体仓库数据的方法。
   4. getters.js 在获取数据的基础上，进行进一步的修改
   5. actions.js 这里存放也是方法，主要做的是异步操作

如果要在页面中需要展示 state 里面值时 {{this.$store.state.【具体变量名】}}

在vuex 项目中，需要通过commit 方法来提交mutations的操作。actions 方法则需要使用dispatch这个方法来进行分发