六.vue项目实战

Posted on

1.Vue项目

1.1 初始阶段进行文档的编写

1
2
3
4
5
发布博客。以下的步骤： 
在本地博客文件夹根目录(git bash)输入：
hexo new "6.vue项目实战" 
hexo g //生成网页 
hexo d //部署到远端(github)

1.2 vue-cli使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1.npm install -g @vue/cli@3.9.1
2.将配置环境变量  C:\dev\nodejs
3.vue create project-name

//查看最终生效的 webpack 配置信息
vue inspect > output.js

//配置文件参考文档
https://cli.vuejs.org/zh/config/#devserver-proxy

//运行App
npm run serve

//编译App
npm run build

1.3 vue-cli 的创建使用选项

1
2
3
4
5
6
7
8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter        
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

1.4 将项目托管到 github

1
2
3
4
5
6
7
8
9
10
11
#1.打开git brash，输入命令 ssh-keygen -t rsa -C "youremail@example.com"
#2.找到用户主目录下的ssh文件夹，复制id_rsa.pub 文件内容
#3.码云后台点击设置，ssh公钥，黏贴id_rsa.pub 文件内容
#4.码云后台创建新项目
#5.配置本地全局的账号和密码
  git config --global user.name "shenhaieyu"
  git config --global user.email "mazg1987@163.com"
#6.关联远程仓库
  cd project
  git remote add origin git@gitee.com:shenhaieyu/zg-vuecms.git
  git push -u origin master

1.5 严格模式的忽略

1
mui.js?01c3:3440 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

ignore:[‘./lib/mui/js/mui.js’]

1.6 vue中this.$router.push() 传参

(1) . params 传参

1
2
3
4
5
6
7
注意：patams传参 ，路径不能使用path 只能使用name,不然获取不到传的数据

this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})

取数据：this.$route.params.paicheNo

this.$route.params.paicheNo

(2) . query传参

1
2
3
4
5
this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}})

取数据：this.$route.query.paicheNo

this.$route.query.paicheNo

1.7 vuex的基本使用

(1). 基本的使用情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //state用于存储数据
  state: {
  },
  //里面放的是方法,方法主要用于改变state里面的数据
  mutations: {
  },
  //方法,可以修改mutation
  //actions(方法 可以dispatch mutations)  actions中可以有异步操作    
  actions: {
  },
  modules: {
  },
  //对外暴露数据,不修改vuex中的数据
  getters: {
  }
})


//5.修改store中的数据  （参数1：是mutations的名字  参数2：传递给mutations的数据）
 this.$store.commit("subtract",{num:3})

(2). vuex的缓存问题

vuex中数据在刷新网页的时候会丢失。解决思路：我们可以将 vuex 中的数据写到 localstorage 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
npm install --save vuex-persistedstate 


//store.js 

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  state: {
    selected_card: {}, //用户选择的银行卡
  },
  mutations: {
    update_selected_card(state, payload) {
      state.selected_card = payload
    },
  },
  plugins: [createPersistedState()],
})

1.8 qs.stringify()、qs.parse()的使用

qs可通过npm install qs命令进行安装，是一个npm仓库所管理的包。

而qs.stringify()将对象 序列化成URL的形式，以&进行拼接。

1
2
3
4
5
var a = {name:'hehe',age:10};
 qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'

1.9 发送的请求的不同的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import axios from 'axios';
import QS from 'qs';
//设置超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.defaults.baseURL = "http://songshu.xiaomy.net/";

export default function myaxios(method, url, params) {
    if (method == "GET") {
        return axios.get(url, { params: params });
    } else if (method == "POST") {
        var params = QS.stringify(params);
        return axios.post(url, params);
    }
}
1
2
3
4
5
6
7
8
9
10
await myaxios("POST", postusername, this.obj)
  .then(data => {
       this.userlist = data.data.message;
       console.log(this.userlist);
       // this.headimg = this.userlist.headimg_url;
       this.$store.commit("imgurl",this.headimg);
       console.log(this.$store.getters.getimgurl,"22222");
       this.headimg = this.$store.getters.getimgurl;
      });
    },