【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>