Vue-CLI 项目搭建
# 页面中写--》不好---》工程化---》vue是一个前端项目---》webpack支持---》vue官方提供了一个工具
# vue-cli：vue的脚手架，快速创建一个vue项目，带了很多文件
# 解释：
vue2 中，都是使用vue-cli
vue3中，可以使用vue-cli创建，官方更推荐使用 vite ，更块，更小
# Vue-CLI 是基于nodejs的
-nodejs：是一门后端编程语言
-js：前端运行在浏览器中，浏览器中有js的解释器，但是这个解释器只能运行在浏览器中，不能运行在操作系统之上
-于是就有人，把v8引擎，让它能够运行在操作系统之上+c语言写的：文件，网络，操作系统操作的代码
-nodejs：js语法，运行在操作系统上，后端语言
-跟python一样，是一个解释型语言---》解释器
-LTS：长期支持版本，https://nodejs.org/en/download/
# 搭建node环境
-下载相应平台的版本
-一路下一步，安装即可，自动加入环境变量（在任意位置都可以执行这俩命令）
-装完后会释放两个可执行文件
node： 等同于 python
npm： 等同于 pip
# 安装 vue-cli：脚手架
# pip install django ---》去国外下载很慢，npm也是很慢，加速
# 【可以不用】以后使用淘宝定制的cnpm替代npm，去淘宝镜像站下载，速度块
# 执行：
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 这句话执行完了，以后，就有俩可以安装第三方模块的命令 npm：慢 cnpm：块
# 以后装任何第三方模块，建议使用cnpm，但是使用npm一样的，只是速度差距
cnpm install -g @vue/cli
# 使用vue脚手架，创建vue项目，装完脚手架，就会有个 vue 命令
vue create 项目名 # 注意路径
# 使用编辑器打开创建好的项目（pycharm）
# 另一种创建项目的方式
vue ui
vue项目目录文件介绍
myfirstvue # 项目名，文件夹
-node_modules # 当前vue项目所有的以来 python虚拟环境一样的，很大，小文件很多，可以删除
-public # 文件夹
favicon.ico # 页面小图片
index.html # 单页面开发，就这一个index.html
src # 文件夹，核心代码都在这，以后，都在这里面写东西
assets # 静态资源：js，css，图片。。。
components # 小组件
router # 装vue-router就会有它，不装就没有
store # 装了vuex就会有它，不装就没有
views # 组件，页面组件
App.vue # 跟组件
main.js # 非常重要，整个项目的入口，等同于django的managepy
.gitignore # git忽略文件
babel.config.js # 语法检查，不用管
jsconfig.json
package.json # 很重要，等同于 Python项目 requirements.txt 放了项目所有的以来，不能删
package-lock.json # 锁定依赖包，
README.md # 介绍
vue.config.js # vue配置文件
es6导入导出语法
# 写vue项目，大量的看到：他们是es6的导入和导出语法
import App from './App.vue'
export default{}
# 总结：
1 以后可以在任意位置写xx.js,可以定义变量，定义函数
2 导出某些变量，函数
export default {
name,print
}
2.1 默认导出和命名导出
#默认导出 不用名名字
export default {}
# 命名导出
export const a =10
3 在想用的地方导入
import 别名 form '路径' # . 和 ..
4 使用
别名.name
别名.print()
# 补充：如果一个包下有一个名为index.js 的文件，可以只导入到包这一层
import lqz from './lqz' # 简写成，index.js 可以省略，以后看到的index.js 等同于python的包中的__init__.py
lqz.showName()
vue项目开发技巧
# 以后组件化开发，就是写一个个的组件：页面组件，小组件
# App.vue :根组件
# 以后就是写组件，组件就是 xx.vue
## 第一部分
<template>
<div id="app"> # 组件必须套在一个标签内部，之前咱们用反引号写的html内容
</div>
</template>
## 第二部分：
<script>
export default {
# 以后在这个对象中写咱们之前学的data，methods，watch，computed，生命周期钩子
name: 'App',
data() {
return {
name: 'lqz'
}
},
methods: {
handleClick() {
this.name = '彭于晏'
}
}
}
</script>
## 第三部分：这里面写样式
<style>
h1 {
background-color: red;
}
</style>
# 使用步骤
##1 以后，只要创建组件 HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
x的值是：{{x}},y的值是：{{y}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: ['msg'], # 父传子，自定义属性，接受
data(){
return {
x:10,
y:20
}
}
}
</script>
## 2 在根组件App.vue 中使用这个组件
<template>
<div id="app">
<h1>我是h1</h1>
{{ name }}
<br>
<button @click="handleClick">点我名字变化</button>
<hr>
<HelloWorld :msg="msg"></HelloWorld> # 自定义属性实现父传子
</div>
</template>
<style>
h1 {
background-color: red;
}
</style>
<script>
// 把HelloWorld组件导入
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: 'App',
data() {
return {
name: 'lqz',
msg:'你好啊'
}
},
methods: {
handleClick() {
this.name = '彭于晏'
}
},
components:{ # 注册局部组件
HelloWorld
}
}
</script>
axios与后端交互处理跨域，携带数据，携带请求头
1 .使用axios与后端交互
# 1 安装
npm install -S axios
# 2 在想用的地方导入使用即可
import axios from 'axios'
# 3 使用发送请求即可
axios.get('http://127.0.0.1:8000/user/').then(res=>{
console.log(res)
this.name=res.data.name
this.age=res.data.age
})
# 解决跨域很多种：浏览器的同源策略
-1 后端使用cors技术
-2 使用nginx转发
-3 前端做代理：之上测试阶段使用，上线后没有
2 处理跨域
# 1 django中使用django-cors-headers，解决跨域
# 2 安装 pip3 install django-cors-headers
# 3 在app的注册中加入
INSTALLED_APPS = (
...
'corsheaders',
...
)
# 4 在中间件中加入
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
# 5 配置文件中加入
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*'
)
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',
)
3 post请求携带数据
handleSubmit() {
axios.post('http://127.0.0.1:8000/user/', {
username: this.username,
password: this.password
}).then(res => {
console.log(res.data)
if (res.data.code == 100) {
// 登录成功跳转到百度
location.href = 'http://www.baidu.com'
} else {
alert(res.data.msg)
}
})
}
4 携带请求头
# 请求头中带token
handleSubmit1() {
axios.post('http://127.0.0.1:8000/user/',
{
username: this.username,
password: this.password
},
{
headers: {token: 'asdfasdfasd'}
}
).then(res => {
console.log(res.data)
if (res.data.code == 100) {
// 登录成功跳转到百度
location.href = 'http://www.baidu.com'
} else {
alert(res.data.msg)
}
})
}
props配置项指定默认值
# props是组件间通信，父传子，自定义属性时，子组件间中接收父组件中传入的数据使用的配置项
# 三种使用方式
//1 基本使用
// props: ['msg'],
// 2 属性认证，限制类型
// props:{
// msg:String // 接受的msg必须是string类型
// },
// 3 限定类型，限定必传，限定默认值
props: {
msg: {
type: String, //类型
required: false, //必要性
default: '老王' //默认值
},
xx:Boolean,
},
混入
# minxin 混入：可以把多个组件共用的配置提取成一个混入对象
# 提取混入对象
1 第一步：抽取共用的代码，定义混入 mixin的index.js下写了
export const hunhe = {
methods: {
handleShowName() {
alert(this.name)
}
},
}
2 第二步：注册混入，全局注册（只要注册了，所有组件都可以用）
// 全局注册混入,以后所有组件中都能用
import {hunhe} from '@/mixin'
Vue.mixin(hunhe)
3 第三步：注册混入，局部注册，在组件中注册了，这个组件可以用(在组件中)
import {hunhe} from "@/mixin";
mixins: [hunhe]
插件
# 插件功能：用于增强Vue，后期咱们学的vuex，vue-router，elementui都是基于插件的形式使用的
# 实现一个插件
1 定义一个插件，插件内部加入混入
import Vue from 'vue'
export default {
install(a) {
console.log(a)
// 写代码，加入混入
Vue.mixin({
methods: {
handleShowName() {
alert(this.name)
}
}
})
}
}
2 应用插件 在main.js中
import plugins from './plugins'
Vue.use(plugins) // 自动调用插件内的install，完成对Vue的强化
命名插槽的其他写法
# 1 默认插槽
# 2 具名插槽
# 3 使用v-slot:bottom指定命名插槽 建议使用这个
<template v-slot:bottom>
<form action="" >
<p>用户名：<input type="text"></p>
<p>密码：<input type="password"></p>
<button>登录</button>
</form>
<p>我是p标签</p>
</template>
评论