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>

vue-cli3笔记相关推荐

八、Vue cli3详解学习笔记
一.认识Vue CLI3 1.1 vue-cli 3 与 2 版本有很大区别: vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 ...
Vue学习笔记（3）（Vue CLI）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vue CLI 0. 什么是vue-cli 如果你在开发大型项目, ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue cli3 绑定域名_使用CLI设置WildFly绑定地址并关闭
vue cli3 绑定域名仅使用命令行参数将WildFly绑定到主机名/ IP上非常容易. 我有一个简单的GNU / Linux盒子,可以用它玩各种东西,其中之一就是WildFly. 我使用以下命令 ...
vue/cli3 配置vux
安装各插件试过安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...

vue-cli3笔记

vue-cli3笔记相关推荐

最新文章

热门文章