Vue入门五（Vue-cli安装｜Vue项目目录介绍｜es6导入导出语法｜Vue开发规范｜Vue+axios交互前后端｜Proos配置项｜混入｜LocalStorage与SessionStorage）

一、Vue-cli安装

安装Vue-cli

cnpm install -g @vue/cli

***Mac系统在这个时候安装可能会出现错误 原因是因为需要一个安装最高的权限 ***

npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }

输入 — 输入完命令之后 输入电脑密码即可

sudo npm install -g cnpm --registry=https://registry.npmmirror.com --verbose

如果下载速度较慢可以换源 使用国内镜像源

npm install -g cnpm --registry=https://registry.npm.taobao.org

创建Vue项目

vue create 项目名称
1.勾选Manually select features
2.Babel Router Vuex
3.2.X
4.Yes

打开项目方式

1.npm run serve
2.选择使用软件打开

二、vue项目目录介绍

'''- 一级目录 --二级目录'''
firstvue				 		项目名称
 -node_modules					文件夹内部很多当前项目依赖的模块
public							文件夹
 -favicon.ico					网站vue图标
 -index.html					spa：单页面应用
src								代码都写在这下面
 -assets						静态资源 Js Css Img 类似于Static文件夹
  --logo.png					静态资源图片
 -components					组件
  --HelloWorld.vue				默认一个hello world组件
 -router						装vue-router自动生成的 没有安装则没有
  --index.js					vue-router配置
 -store							装了vuex自动生成的 没有安装则没有
  --index.js					vuex配置
 -views							一堆组件 页面组件
  --AboutView.vue				关于页面组件
  --HomeView.vue				主页页面组件
App.vue							跟组件
main.js							整个项目启动入口	
.gitignore						git忽略文件
babel.config.js					babel配置
package.json					重要 类似于python项目中requirements.txt 当前项目所有依赖
package-lock.json				锁定文件 package.json中写了依赖的版本 这个文件锁定所有版本
README.md						读我 项目介绍
vue.config.js					vue项目配置文件

三、es6的导入导出语法

1）默认导入导出

上面刚讲到我们写的代码都写在src文件夹里面 所以创建文件开始操作

方式1:	
		var name='胡歌'
		
		function printName(){
		    console.log(name)
		}
		
		var f= () => {
		    console.log('我是F')      // 相当于 var f=function(){} 匿名函数
		}
		
		
		export default {            // 默认导出 必须导出别的Js才能够导入
		    'name': name,
		    'printName':printName,
		    'f':f,
		}

方式2:
		export default {
	    'name': '胡歌',
	    printName(){
	        console.log(this.name)      // 默认导出 命名方式 上面代码就不需要了 直接定义}
		}


'''导入文件'''
		import like from './Like/'    // 在文件夹下面创建一个index.js文件 以后导入默认会找它
		
		console.log(like.name)
		like.printName()
		like.f()     // 如果没有导出则会报错

2）命名导入导出

export const name='胡歌'
export const printName = () =>{         // 命名导出
    console.log('我是胡歌')
}

'''导入文件'''
import {name, printName} from './Like/'
console.log(name)
printName()

四、vue项目开发规范

	我们在Vue中写组件都是单页面组件 一个组件是一个xx.vue 页面组件和小组件
	
	一个组件内部都有三个部分
		template标签			Html内容都写在里面
		script标签			Js内容都写在里面
		style标签			Css样式内容都写在里面
		
	main.js是整个项目的入口
		new Vue({ router, store, render: h => h(App) }).$mount('#app')
		1.把App.vue根组件导入
		2.把App.vue组件中得数据和模板 插入到了index.html的id为app  div中了
		3.在组件template中写模版 插值语法 指令
		4.在组件export default {}中写Js
		5.在组件style中写Css样式

<template>
  <div id="app">
    <h1>胡歌</h1>
    <button @click="handsomeBoy">点我看帅哥</button>
  </div>
</template>

<script>
export default {
  name:'App',
  data(){
    return {name:'胡歌'}
  },
  methods:{
    handsomeBoy(){
      alert('帅哥胡歌')
    }
  }
}
</script>

<style>
h1{background-color: greenyellow; color: white;}
</style>

五、vue项目集成axios vue项目前后端打通

1）解决跨域问题

安装模块

pip3 install django-cors-headers

Settings.py App中注册应用

INSTALLED_APPS = (
    'corsheaders',
)

中间件注册

 MIDDLEWARE = [
  	'corsheaders.middleware.CorsMiddleware'
   ]

复制到配置文件中

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',
)

导入模块

import axios from 'axios'

2）vue项目集成前后端打通

---

先使用Django编写好后端接口

'''文件里面处理好跨域问题'''
class Book(models.Model):
    name = models.CharField(max_length=32)
    price = models.CharField(max_length=32)
    address = models.CharField(max_length=32)

class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = '__all__'

class BookView(ViewSetMixin, ListAPIView):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

router = SimpleRouter()
router.register('books', views.BookView, 'books')
urlpatterns += router.urls

使用Vue+axios编写前端

<template>
  <div id="app">
    <ul>
      <li v-for="book in bookList">图书名称:{{book.name}}---->>>图书价格:{{book.price}}---->>>{{book.address}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {bookList:[]}
  },
  created(){
    axios.get('http://127.0.0.1:8000/books/').then(res =>{
      console.log(res.data)
      this.bookList=res.data
    })
  },
}
</script>

3）前后端交互版登录功能

Django编写好后端登录接口

urlpatterns = [
    path('login/', views.login)
]

def login(request):
    username = json.loads(request.body).get('username')
    password = json.loads(request.body).get('password')
    if username == 'like' and password == '123':
        return JsonResponse({'code': 100, 'msg': '登录成功'})
    else:
        return JsonResponse({'code': 101, 'msg': '账号或密码错误'})

Vue+axios编写前端

<template>
  <div id="app">
    <ul>
      <li v-for="book in bookList">图书名称:{{ book.name }}---->>>图书价格:{{ book.price }}---->>>{{ book.address }}</li>
    </ul>
    <hr>
    <h1>登录功能</h1>
    <p>用户名:<input type="text" v-model="username"></p>
    <p>用户名:<input type="password" v-model="password"></p>
    <button @click="Submit">登录</button>{{msg}}
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {bookList: [], username: '', password: '', msg:' '}
  },
  methods: {
    Submit() {
      axios.post('http://127.0.0.1:8000/login/', {
        username: this.username,
        password: this.password
      }).then(res => {
        console.log(res.data)
        if(res.data.code == 100) {
          location.href = 'http://www.baidu.com'	// 登录成功跳转百度
        } else {
          this.msg = res.data.msg
        }
      })
    }
  },
  created() {
    axios.get('http://127.0.0.1:8000/books/').then(res => {
      console.log(res.data)
      this.bookList = res.data
    })
  },
}
</script>

六、Props配置项

Props的配置项主要作用就是用来接受父传子自定义的属性

'''自定一个Vue文件'''

<template>
  <div>
    <button>后退</button>
    {{title}} ---- {{msg}}
    <button>前进</button>
  </div>
</template>

<script>
export default {
  name: "child",
  props:['msg'],    	// 第一种数组的方法

  props:{msg:String},   // 第二种方法 里面可以写多个数据值 必须是字符串 数据验证

  props:{
    msg:{               // 第三种方法 指定类型 必填 默认值
      type: String,       // 类型
      required:false,   // 是否必填
      default:'你爸爸我'  //默认值
      }
  },
  data(){
    return{
      title:'首页'
    }
  }
}
</script>


'''App.vue导入文件 使用自定义Vue'''

<template>
  <div id="app">
    <h1>app Props配置项</h1>
    <child msg="父组件给的"></child>
  </div>
</template>

<script>
import child from "@/components/child";   // @代指 src路径

export default {
  name: 'App',
  components:{
    child
  }
}
</script>

七、混入

mixin混入可以把多个组件公共的配置提取成一个混入对象 以后可以全局使用和局部使用

'''在src文件夹中创建一个mixin文件创建一个js混入文件'''

export const hunhe = {		// 多个组件公共使用的配置
   methods: {
    handlePrintName() {
      alert(this.name)
    }
  },
}

局部导入
	 <template>
	 <div id="app">
	    <h1>混入</h1>
	    <button @click="handlePrintName">点我弹出名称{{name}}</button>
	    <hr>
	    <child></child>		// 使用父组件
	  </div>
	</template>
	
	<script>
	
	import child from "@/components/child";		// 导入父组件
	import {hunhe} from "@/mixin";    // 导入混入对象
	
	export default {
	  name: 'App',
	  data(){
	    return{
	      name:'胡歌'
	    }
	  },
	  components:{child},
	
	   mixins:[hunhe,]     // 使用混合对象 如果自己也有methods则使用自己的
	}
	</script>


全局导入 main.js

import {hunhe} from "@/mixin";

Vue.mixin(hunhe)  // 全局引入

八、scoped样式

Scoped主要作用就是让当前样式只允许当前组件生效 别的组件无效

'''App.Vue'''
<template>
  <div id="app">
    <h1>App Scoped</h1>
    <child></child>
  </div>
</template>

<script>
import child from "@/components/child";
export default {
  name: 'App',
  components:{
    child
  },
}
</script>
<style scoped>    /* 加上 Scoped 只为app.Vue中的h1标签设置 */
h1{
  background-color: #42b983;
}
</style>

九、localStorage与sessionStorage

'''App.Vue	 需要安装 cnpm install vue-cookies -S '''

<template>
  <div id="app">
    <h1>localStorage操作</h1>
    <button @click="saveStorage">点我向localStorage放数据</button>
    <button @click="getStorage">点我获取localStorage数据</button>
    <button @click="removeStorage">点我删除localStorage放数据</button>

    <h1>sessionStorage操作</h1>
    <button @click="saveSessionStorage">点我向localStorage放数据</button>
    <button @click="getSessionStorage">点我获取localStorage数据</button>
    <button @click="removeSessionStorage">点我删除localStorage放数据</button>

    <h1>cookie操作</h1>
    <button @click="saveCookie">点我向localStorage放数据</button>
    <button @click="getCookie">点我获取localStorage数据</button>
    <button @click="removeCookie">点我删除localStorage放数据</button>
  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      localStorage.setItem('userinfo', JSON.stringify(person))
    },
    getStorage() {
      let userinfo = localStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeStorage() {
      // localStorage.clear()
      localStorage.removeItem('userinfo')
    },

    saveSessionStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      sessionStorage.setItem('userinfo', JSON.stringify(person))
    },
    getSessionStorage() {
      let userinfo = sessionStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeSessionStorage() {
      // localStorage.clear()
      sessionStorage.removeItem('userinfo')
    },

    saveCookie() {
      cookies.set('name','lqz','7d')  // 按秒计
    },
    getCookie() {
      console.log(cookies.get('name'))
    },
    removeCookie() {

      cookies.remove('name')
    }
  }
}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>