vue项目目录、es6的导入导出语法、vue项目开发规范、vue项目集成axios、props配置项、mixin混入、插件plugins、scoped样式、localStorage|SeesionStorage|cookie等
vue项目目录介绍
myfirstvue 项目名字
node_modules 文件夹，内部有很多当前项目依赖的模块，可以删除，删除后想在下载:'npm install'
public 文件夹
├── favicon.ico 网站的小图标
└── index.html spa：single page application：单页面应用，组件放里面
src 我们写的代码，都在这个文件夹下
├── App.vue 根组件
├── assets 静态资源，js，css，图片，类似于static文件夹
│ └── logo.png 静态资源的图片
├── components 组件：小组件，用在别的大(页面组件)组件中
│ └── HelloWorld.vue 默认的一个HelloWorld组件
├── main.js 整个项目启动入口：可以在此注册插件，全局有效
├── router 装了vue-router自动生成的，如果不装就没有
│ └── index.js vue-router的配置
├── store 装了vuex自动生成的，如果不装就没有
│ └── index.js vuex的配置
└── views 放了一堆组件，页面组件
├── AboutView.vue '关于'页面组件
└── HomeView.vue '主页'页面组件
.gitignore git的忽略文件
babel.config.js babel的配置
jsconfig.json
package.json 重要：类似于python项目的requirements.txt，当前项目有依赖
package-lock.json 锁定文件：package.json中写了依赖的版本，这个文件锁定所有版本
README.md 读我，项目的介绍
vue.config.js vue项目的配置文件
es6的导入导出语法
如果要导入，必须先的设置导出语法,有两种：
- 默认导出
- 命名导出
默认导出和导入
导出
写一个js文件，在js中定义变量，函数，最后使用export default导出
export default{
name:'jason',
printName(){
console.log(this.name)
}
}
导入
在想使用的js中，导入
import jason(自定义名字,可以随便起) from './jason/'
// 在script中写
jason.printName()
命名导出和导入
导出
写一个js，在js中定义变量，最后使用export导出
export const printMyName=()=>{
console.log('my name is jason')
}
导入
在想使用的js中，导入
import {name,printMyName} from '/jason/index'
// 在script中写
console.log(name)
printMyName()
补充
在包下可以建立一个名为index.js的文件，以后导入的时候，默认找到他，就像上面的包导入可以简写为：
import {name,printMyName} from '/jason'
类似于python中的__init__.py
vue项目开发规范
以后写的组件，都是单页面组件，使用xx.vue以后写一个组件就是一个xx.vue,
它又分：页面组件和小组件。
以后一个组件就是一个xx.vue，内容有三部分：
<template></template> 写html内容
<script></script> 写js内容
<style></style> 写css样式
main.js是整个项目的入口
- 把
App.vue根组件导入了 - 使用
new Vue({render:h=>h(App)}).$mount('#app')把App.vue组件中得数据和模版，插入到了index.html的id为app的div中 - 在vue项目中，我们以后只要在每个组件的
export default{}写之前学过的所有js的东西 - 只要在每个组件的template，写模版，插值语法，指令。
- 只要在每个组件的style，写样式
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default{
name:'App', // 名字尽量以文件名作为名字
// 也可以写data，methods等
}
</script>
<style>
</style>
vue项目集成axios，vue项目前后端打通
继承axios，向图书接口发送请求展示前端
安装axios
cnpm install axios --S # 保存到全局，并且会将该模块保存到package.json
导入使用
import axios from 'axios'
vue中代码演示
<script>
export default {
name: 'HomeView',
data(){
return {
data:[],
name:'oscar'
}
},
created(){
axios.get('http://127.0.0.1:8000/books').then(res=>{
this.data=res.data
})
}
}
</script>
跨域问题解决方案(django项目)
下载所需插件corsheaders
pip3.8 install django-cors-headers
settings.py中写
1. app中注册：
INSTALLED_APPS = (
...
'corsheaders',
...
)
2.中间件注册：
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
3. 将下面代码复制：
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
前后端交互版登录功能
props配置项
props配置项是组件间通信父传子，父组件在子组件的标签内配置一个自定义属性，然后再子组件的vc对象中定义一个props属性，该属性可以有三种写法：(也可以定义多个属性，需要就要在props中写多个)
- 数组写法
props:['myname']
- 对象写法
props:{
myname:String
}
- 对象套对象写法
props:{
myname:{
type:String, // 指定类型
require:true, // 必要性:即父组件的自定义属性必须要写
default:'xunfei' // 默认值为'xunfei'
}
}
mixin混入
作用：把多个组件共同的配置提取成一个混入对象(抽取公共对象，有就用自己的，没有就用mixins的)
使用步骤
- 新创一个mixin文件夹，新建一个index.js文件，在index.js内写混入对象
export const func={
methods: {
printName(){
alert(this.name)
}
},
// 也可以写data等其他属性
}
- 局部导入：在组件中
import {func} from '@/mixin' // 大括号必须得加，不加就报错
export default{
name:'About',
data(){
return {
name:'啦啦啦'
}
},
created(){
console.log(this.name)
},
mixins:[func] // 局部导入
}
</script>
- 全局导入：在main.js中，以后所有组件都可以用
import {func} from '@/mixin'
Vue.mixin(func)
插件
作用：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是vue，第二个以后得参数是插件使用者传递的数据。
定义插件：新建一个plugins文件夹内在新建一个index.js文件
使用步骤
在index.js文件中写
1. vue实例上放个变量
import Vue from 'vue'
import axios from 'axios'
export default{
install(miVue){
console.log(miVue)
// prototype:原型，可以理解为python中的类
Vue.prototype.$name='克里斯' // 类比python，在类中方了一个属性，所有对象杜能取到，但是也有所区别
Vue.prototype.$http=axios
}
}
后续在组件中就可以通过:this.$name,this.$http取出以上我们定义在prototype中的属性
2. 使用插件，加入混入
直接可以配置全局属性
'>plugins>index.js中'：
import Vue from 'vue'
export default{
install(miVue){
Vue.mixin({
data(){
return {
hobby:'read',
age:100
}
}
})
}
}
'在组件中'：
created(){
console.log(this.hobby,this.age)
}
3. 定义全局组件
可以查看elementui，就是这样写的全局组件
'plugins>index.js'
export default{
install(miVue){
console.log(miVue) // Vue的构造方法
Vue.component('Haha',{
template:`
<div>
<button @click="handledown">后退</button>
<h2>当前显示{{name}}</h2>
<button @click="handleup">前进</button>
</div>
`,
data(){
return {
name:'KEVIN'
}
},
methods:{
handledown(){
alert('上一页')
},
handleup(){
alert('下一页')
}
}
})
}
}
嵌入组件
<template>
<div class="about" >
<child :myname="name"></child>
<Haha></Haha>
</div>
</template>
这样会报错，需要修改一下vue.config.js
意思就是：当前版本的vue是仅运行的。这时，模版编译器是不可用的，可以将模版预编译成呈现函数，也可以使用编译器包含的内部版本。
module.exports = {
// webpack配置 - 简单配置方式
configureWebpack: {
resolve: {
alias: {
"vue$": "vue/dist/vue.esm.js", //加上这一句
}
}
}
}
4. 定义自定义指令
install(a) {
console.log('执行了插件', a)
// 定义指令
//定义全局指令：跟v-bind一样，获取焦点
Vue.directive("fbind", {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
});
5.原型上放方法，所有vc和vm都可以用hello
Vue.prototype.hello = () => {
alert("你好啊");
};
在main.js中使用插件
import plugins from '@/plugins'
Vue.use(plugins) // 本质：使用use，会自动触发插件对象中的install
以后在组件中可以直接用插件中写的东西
scoped样式
作用：让样式在局部生效，防止冲突
写法：
<style scoped></style>
比如在全局组件定义了某个标签css样式，然后再局部组件又自定义了该标签css样式，可以加个scoped属性让全局组件的css样式失效。
localStorage、sessionStorage和cookie
localStorage、sessionStorage是window浏览器对象有的东西，如果想在浏览器中存储数据：
-
永久存储：localStorage
应用场景：不登录加购物车，虽然没登录，但是购物车能记录商品 -
关闭页面数据就没了(临时存储)：sessionStorage
-
设定一个时间，到时候就过期：cookie
localStorage
<template>
<div >
<button @click="handleset">点我设置localStorage</button>
<button @click="handleget">点我获取localStorage</button>
<button @click="handleclear">点我清除localStorage</button>
</div>
</template>
<script>
export default{
name:'Storage',
methods:{
handleset(){
var userinfo={
name:'jason',
age:100
}
localStorage.setItem('userinfo',JSON.stringify(userinfo))
},
handleget(){
var userinfo=JSON.parse(localStorage.getItem('userinfo'))
console.log(typeof userinfo,userinfo)
},
handleclear(){
// localStorage.clear()
sessionStorage.removeItem('userinfo') // 这样删除可以避免将有用的信息删除
}
}
}
</script>
<style>
</style>
sessionStorage
<template>
<div >
<button @click="handleset">点我设置sessionStorage</button>
<button @click="handleget">点我获取sessionStorage</button>
<button @click="handleclear">点我清除sessionStorage</button>
</div>
</template>
<script>
export default{
name:'Session',
methods:{
handleset(){
var userinfo={
name:'jason',
age:100
}
sessionStorage.setItem('userinfo',JSON.stringify(userinfo))
},
handleget(){
var userinfo=JSON.parse(sessionStorage.getItem('userinfo'))
console.log(typeof userinfo,userinfo)
},
handleclear(){
// sessionStorage.clear()
sessionStorage.removeItem('userinfo') // 这样删除可以避免将有用的信息删除
}
}
}
</script>
<style>
</style>
cookie
<template>
<div >
<button @click="handleset">点我设置cookies</button>
<button @click="handleget">点我获取cookies</button>
<button @click="handleclear">点我清除cookies</button>
</div>
</template>
<script>
import cookie from 'vue-cookies'
export default{
name:'Cookie',
methods:{
handleset(){
var userinfo={
name:'jason',
age:100
}
cookie.set('userinfo',userinfo) // 默认是一天，填写数字是按秒计，可以填写:'10d',就是10天
},
handleget(){
var userinfo=cookie.get('userinfo') // cookie可以不用转字符串形式
console.log(userinfo)
},
handleclear(){
cookie.remove('userinfo') // cookie的清除是直接给到期时间设置为过期
}
}
}
</script>
<style>
</style>
集成elementui
第三方样式库，比较常见的有：
- 饿了么团队：
elementui - iview
- 移动的ui：vant
使用步骤
1. 安装： cnpm i element-ui -S
2. 在main.js中引入
浙公网安备 33010602011771号