vue-cli3笔记

【npm 查看全局安装过的包】
npm list -g --depth 0

【cnpm】
官网：http://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

【创建脚手架】
npm install -g @vue/cli

【创建项目】
vue create my-project 选择自定义的那个 （会根据网络速度自动寻找下载快的方式）
自定义勾选：默认勾中的Babel、Linter/Formatter之外，再勾上Router，Vuex
ESLint with error prevention only
Lint on save
In package.json

【命令】
yarn serve   热重载
yarn build   

【ajax请求】
yarn add axios
使用axios，代码配置看这里https://www.npmjs.com/package/axios

【路由】
创建项目时选择自定义，路由基本代码会自动创建完成

【引入图片】
<img src="../assets/logo.png" alt="">
跟之前的方法一样，如果是动态的话，要像下面那样判断
<img v-if="item.avatar" :src="item.avatar" class="tx" alt="" >
<img v-if="!item.avatar" src="../assets/tx.png" class="tx" alt="">
因为<img :src="item.avatar?item.avatar:'../assets/tx.png'" class="tx" alt="">这样写，默认图片显示不出来
=====================创建项目可能遇到的问题
这步执行成功需要安装yarn (npm install -g yarn)或cnpm，个人喜欢用yarn
这步如果提示operation not permitted, mkdir 'd:\vue\vue1',则右击vue文件夹，点击管理员取得所有权

=====================yarn
yarn add axios
yarn remove axios

=====================axios关键配置
【xxx.vue get的使用方法】
const axios = require("axios");
axios.get('/api/case/case_list').then(function(res) {
   t.list=res.data.data.case_list
});

【xxx.vue post的使用方法】
const axios = require("axios");
import qs from 'qs';
var data=qs.stringify({id:2});
axios.post('/api/case/case_detail',data).then(function(res) {
});
post的话，传的参数必须经过qs处理下，否则后台是收不到参数的

【跨域问题】
解决办法：在项目根目录下创建vue.config.js，写下面的代码
module.exports = {
  devServer: {
    host: "localhost",
    port: 8888, // 端口号
    https: false, // 是否支持https
    open: false, //配置自动启动浏览器
 
    // 配置多个代理  
    proxy: {
      "/api": {
        target: "http://www.ijiasheji.com/index.php/api/",// 要访问的接口域名
        ws: true,// 是否启用websockets
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
            '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://www.ijiasheji.com/index.php/api/case/caselist'，直接写'/api/case/caselist'即可
        }
      }
    }
  }
}

代理那块的理解：
要访问http://www.ijiasheji.com/index.php/api/case/caselist这个接口
首先target要设置为http://www.ijiasheji.com/index.php/api/
另外pathRewrite要写成 '^/api': ''
这样以后axios.post的时候直接写/api/case/caselist就可以了
=====================其他常用代码
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

=====================vuex公共state数据
xxx.vue
import { mapState } from 'vuex';
computed:{
  ...mapState(['ajaxtit','imgtit'])
},
之后axios里面可以直接使用this.ajaxtit和this.imgtit

登录成功后的状态也是存到这里

mutations: {
  setusertoken(state,payload){
    state.usertoken=payload.usertoken;
    state.username=payload.username;
  }
},
this.$store.commit('setusertoken',{usertoken:res.data.data.token,username:res.data.data.user_name})

=====================公共js
参考网址：https://blog.csdn.net/liuliu3636/article/details/88069392

【基本实现】
在src下创建common.js
function a(){alert('a')}
function b(){alert('b')}
export default {
  a,
  b
}

main.js
import common from './common'
Vue.prototype.common=common

xxx.vue
this.common.a()

【checkcode函数】
function checkcode(t,res,successfun,failfun){
  //前3个参数必传 第一个参数是传vue实例，保证可以完成路由跳转
  if(res.data.code==1 || res.data.code==0){
    successfun();
  }else if(res.data.code==-1){
    if(failfun){
      failfun();
    }else{
      alert(res.data.msg)
    }
  }else if(res.data.code==20003){
    t.$router.push({ name: 'login', params: {}})
  }
}
export default {
  checkcode
}

=====================vue-router常用代码
【带参数的路由】
{
  path: '/homedet/:id',
  name: 'homedet',
  component: () => import('./views/Homedet.vue')
}
{
  path:'/',
  redirect:'/home'
}
<router-link :to="'/homedet/'+item.id"></router-link>
this.$route.params.id;

【选中状态的样式】
.router-link-active{border-bottom-color:rgb(164,138,108)}

案例列表home 案例详情homedet 都要选中 案例这个nav
home是使用router-link-active实现的，但是homedet只能自己手动附上class了
mounted(){
  var fullpath=this.$route.fullPath;
  if(fullpath.indexOf('homedet')!=-1){
    document.getElementById('casenav').className='router-link-active';
  }
}
注意：document.getElementById('casenav')这个要在mounted里面使用，created里面是null

【exact的使用】
<router-link to="/" exact>案例</router-link>
防止/about 也算匹配上 /，因此加上exact
<router-link to="/about">About</router-link>

【js跳转页面】
this.$router.push({ name: 'login', params: {}})
this.$router.replace({ name: 'login', params: {}})
this.$router.go(-1)

=====================写console.log报错
参考：https://www.cnblogs.com/yshyee/p/10874870.html

error: Unexpected console statement (no-console) at
这个错误是Vuejs - 使用ESLint检查代码质量时进行提示的，修改成以下方式解决：
window.console.log(res);

=====================打包成功后，放入php环境中
【放入php环境】
打包成功后，把dist里面的内容拷贝到网站文件夹中，比如是vuecli
下载phpstudy，http://phpstudy.php.cn/wenda/397.html按照这个创建好网站，填写内容如下
域名：www.vuecli.com
端口：http 80
根目录：d:/phpstudy_pro/www/vuecli
勾中同步hosts，由于本地没有数据库，所以没有勾选创建数据库
其他的走默认即可，点击确认后，通过 www.vuecli.com 就可以访问打包好的项目了

上面的css和js路径是 / ，也就是说如果vue.config.js里面不设置publicPath的话，默认值就是/
但是网站不一定在php里面就是根路径啊，比如：
如果你的应用被部署在 http://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/

【刷新404问题】
有个问题，http://www.vuecli.com/home比如这个网址，目前是正常访问的。
但是刷新后，页面显示如下
Not Found
The requested URL /home was not found on this server.

https://segmentfault.com/a/1190000010191670?utm_source=tag-newest 提到了需要php去调
php调整指南网址如下
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
（vue官网的HTML5 History模式 后端配置例子）

=====================网站的favicon.ico
直接更换public文件夹下的favicon.ico即可

=====================pc ui框架 Element
官网：https://element.eleme.cn/#/zh-CN  
安装：yarn add element-ui

常用功能：
layout 字体font-family代码 button 
radio checkbox input框（see密码框 带icon输入框 输入长度限制）计数器 select 级联选择器 时间选择器 日期选择器 日期时间选择器
分页 各种弹框提示 走马灯 无限滚动

【radio和checkbox样式调整】
/*radio自定义样式*/
.myradio .el-radio__inner{width: 22px;height: 22px;}
.myradio .el-radio__input.is-checked .el-radio__inner{background:#fff;border-color:#46c5ab;}
.myradio .el-radio__inner::after{width: 14px;height: 14px;}
.myradio .el-radio__input.is-checked .el-radio__inner::after{background:#46c5ab;}
.myradio .el-radio__input.is-checked+.el-radio__label{color:inherit;}

/*checkbox自定义样式*/
.mycheckbox .el-checkbox__inner{width: 22px;height: 22px;}
.mycheckbox .el-checkbox__input.is-checked .el-checkbox__inner,.mycheckbox .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color: #46c5ab;border-color: #46c5ab;}
.mycheckbox .el-checkbox__inner::after{width: 5px;height: 12px;left: 7px;}
.mycheckbox .el-checkbox__input.is-checked+.el-checkbox__label{color:inherit;}

<el-radio v-model="radio" label="1" class="myradio">男</el-radio>
<el-checkbox label="a" class="mycheckbox"></el-checkbox>