Vue脚手架搭建过程
- 检查 vue-V 判断当前设备是否有vue环境,如果没有,就执行npm install -g @vue/cli
- 再次检查vue-V 看是否创建成功
- 创建vue项目的途径 有 vue ui (vue自己的图形界面化的工具),第二个是vue create 【项目名】
- 在使用命令创建时,会问你一些问题,一路回车默认创建即可
- 创建完成后 ,会提示你进入相应的项目目录,执行npm run serve 启动目录,等待启动完成后,就可以看到vue的logo了,此时代表项目创建成功
- 项目中,src文件夹是我们的源文件夹,所有的代码编辑工作在这里完成
- vue项目是一个spa项目,即全局只用一个vue页面,其他内容通过组件或路由的方式来进行引入
- 在src的文件夹创建router文件夹,里面新建一个index.js文件,这里掌管整个项目的路由配置,需要在main.js中进行相关配置
- 当项目路由配置完成后,我们需要引入相关依赖,(这步可以在第八步之前做)在当前项目下面运行cnpm install vue-router --save
- 如果你的项目需要用到 ajax,那你需要添加另外一个依赖,cnpm install axios --save 并且要在main.js 中进行注册
vue项目引入第三方样式库,bootstrap
-
cnpm install bootstrap@3 --save 卸载:cnpm uninstall bootstrap
-
cnpm install jquery --save
-
在项目的根目录中,与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 } }
-
在页面中的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
- 在main.js中引入vuex import Vuex from ‘vuex’
- 在项目中创建一个store文件夹
- index.js 是vuex的核心文件,这里赋值vuex对象的配置
- state.js 仓库的配置,当前应用需要共享的数据都可以在这里声明
- mutations.js 修改具体仓库数据的方法。
- getters.js 在获取数据的基础上,进行进一步的修改
- actions.js 这里存放也是方法,主要做的是异步操作
如果要在页面中需要展示 state 里面值时 {{this.$store.state.【具体变量名】}}
在vuex 项目中,需要通过commit 方法来提交mutations的操作。actions 方法则需要使用dispatch这个方法来进行分发