修改npm的镜像源
npm config set registry https://registry.npm.taobao.org
npm config list 查看源的信息了
1.Vuex
Vuex是一套公共的状态管理方案,能够进行多组件之间的数据共享。
组件之间通信的方式:
1.父传子
2.子传父
3.中央事件总线
4.this. r e f s t h i s . refs this. refsthis.parent
5.provide inject
6.Vuex
1.1vuex的使用步骤
//1.安装vuex
npm i vuex –S
//2.在main.js中创建一个store仓库(保持了共享的状态)
import Vuex from ‘vuex’
Vue.use(Vuex)
var store = new Vuex.Store({
state:{
count:100
},
mutations:{
increment(state){
state.count++;
},
sub(state){
state.count–;
}
}
})
//3.把store挂载到vm实例中
//把store挂载到vuex中
var vm = new Vue({
el:"#app",
router,
store,
render©{
return c(App)
}
})
//4.在组件中使用vuex共享的数据了
//4.1 在页面中使用 { { KaTeX parse error: Expected 'EOF', got '}' at position 18: …ore.state.count}̲} //4.2 在js代码中…store.state.count
//4.3 如果要修改vuex中的state
this.$store.commit(“mutation的名字”)
1.2vuex的核心概念
State 存放需要被组件共享的数据
Mutations 修改state的唯一途径,是一个方法,会把state作为参数传进来
Actions 类似mutation,允许有异步操作,我们需要在action中commit提交mutations
Getters 从state中派生出来的一些状态
Module 我们可以把store分成若干模块
1.3vuex使用的注意点
// 总结:
// 1. state中的数据,不能直接修改,如果想要修改,必须通过 mutations
// 2. 如果组件想要直接 从 state 上获取数据: 需要 this. s t o r e . s t a t e . ∗ ∗ ∗ / / 3. 如 果 组 件 想 要 修 改 数 据 , 必 须 使 用 m u t a t i o n s 提 供 的 方 法 , 需 要 通 过 t h i s . store.state.*** // 3. 如果组件想要修改数据,必须使用 mutations 提供的方法,需要通过 this. store.state.∗∗∗// 3. 如果组件想要修改数据,必须使用 mutations 提供的方法,需要通过 this.store.commit(‘方法的名称’, 唯一的一个参数)
// 4. store中state上的数据在对外提供的时候建议做一层包装,推荐使用 getters。调用的时候则用this.$store.getters.***
// 5. 如果在修改store中的数据的时候,有异步操作,那么我们可以使用actions来完成
1.4 Vuex的数据缓存
原理:每一次提交修改state数据的时候,都把这个数据存到localstorage中
//1.安装vuex-persistedstate插件
npm i -S vuex-persistedstate
//2.在store中引入插件,并且配置到new Vuex.Store实例中
import persistedState from ‘vuex-persistedstate’
var store = new Vuex.Store({
………
plugins:[persistedState()]
})
2.vue/cli脚手架的使用
2.1 基本使用
//1.全局安装vue/clig
npm install -g @vue/[email protected]
//2.使用脚手架创建项目
vue create project_name
//3.vue/cli项目目录结构
//4.启动项目
进入项目根目录,输入 npm run serve
//5.查看默认的配置
在项目根据路下输入 vue inspect > output.js
2.2 eslint的使用
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。
extends: [
‘plugin:vue/recommended’,
‘@vue/standard’
],
vue/recommended 这个插件可以帮我们检测vue的模块的js代码的问题
eslint的规则参照代码
//修复错误
npm run lint --fix
//关闭保存代码之后自动使用eslint检测代码的问题 vue.config.js
// vue.config.js
module.exports = {
lintOnSave: true
}
Mysql 的问题: (没有装过mysql的同学做)
1.安装wamp
2.启动wamp (有可能启动之后不是绿色)
3.进入wamp安装目录下的mysql文件下的bin目录
G:\program files\wamp\bin\mysql\mysql5.6.12\bin
打开命令行,输入命令 mysql -u root -p
如果没有设置过密码,密码应该为空
如果能看到下面的页面,说明mysql服务器启动了
4.安装sqlyog (如果之前有同学装过了navicat就不需要做了)
5.安装sqlyog的时候,激活码就在文件夹的sn.txt中
6.启动sqlyog,连接数据库
7.数据库连接成功之后,在vue项目的 资料文件夹下,有一个vuecms3_nodejsapi文件夹
找到文件夹下的 dtcmsdb4.sql文件,打开,复制所有代码,黏贴到query中,然后ctrl+a选中所有代码,点击三角形执行代码
8.打开vuecms3_nodejsapi文件夹下面src下面的app.js 添加自己数据库的账号和密码
const orm = require(‘orm’);
app.use(orm.express(‘mysql://root:[email protected]:3306/dtcmsdb4’,{
define:function(db,models,next){
next();
}
}));
9.在vuecms3_nodejsapi文件夹下面src路径下面打开命令行,输入 node app命令启动node服务器 如果看到下面,说明服务器启动成功 (注意:这个node窗口不能关闭)
10.来到vue-cms这个文件夹下,修改文件夹下的vue.config.js,把host后面换成
host: ‘localhost’,
devServer: {
open: true,
host: ‘192.168.0.101’,
port: 3000,
https: false,
hotOnly: true,
//配置代理服务器
proxy: {
//凡是请求以api开头的都会使用下面的代理服务器
‘/api/*’: {
target: ‘http://localhost:8899/’, // 目标服务器地址
secure: false, // 目标服务器地址是否是安全协议
changeOrigin: true, // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!服务端和服务端的请求是没有跨域的
//pathRewrite: {’^/api’: ‘/’} // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
}
}
},
11.打开命令行,输入命令 npm run serve,如果能看到程序页面和数据,说明环境正确