vue项目
目录
vue-cli创建项目
前端做成项目---》使用工具(vue-cli),创建出vue项目,单页面应用,组件化开发
把xx.vue,ts,saa,less---》编译---》在浏览器中执行
vue-cli创建项目开发,在项目中开发,最后上线,一定要编译---》纯粹的html,js,css
浏览器只能失败js,html,css
vue-cli工具,使用nodejs写的,要运行,需要node环境
# 下载node解释器
-一路下一步
-环境变量：可执行文件路径 就在环境变量
-两个可执行文件：
-node： python
-npm： pip
nodejs 怎么来的
-js只能运行在浏览器中，因为浏览器中有它的解释器环境
-基于谷歌浏览器的v8引擎，使它可以运行在操作系统之上 网络包，文件，数据库。。。 用c写的
-js语法 完成后端的编写，全栈
-号称性能高，大量使用协程
文件防篡改校验
-把文件生成md5值
-以后被下载下来，再生成md5值肯定是一样，如果不一样说明被篡改了，不能用了
-1 百度网盘
-秒传
-传到服务器上---》生成md5---》存着
-本地生成md5---》发送到服务端---》一查----》有---》不传了
- 屏蔽
-2 王小云 破解md5,不是把md5变为原来的数据，而是使用其他的数据也能编译出来一样的md5,这样就可以添加其他很多非法的东西
解释型语言和编译型语言
-js，node，php，python 解释型语言 运行解释器之上 pyinstaller
-c，go，c++ 编译型语言 直接把源代码编译成不同平台的可执行文件
-cpython解释器用c写的----》编译成不同平台的可执行文件---》在不同平台双击运行即可
-win
-mac
-linux
-java：一处编码处处运行
-java 虚拟机 ---》虚拟机跨平台
-java字节码文件运行在虚拟机之上
-java写了代码----》编译成字节（区别与可执行文件 jar，war，.class）
创建vue项目
创建vue项目使用什么?
-2.x 使用vue-cli:https://cli.vuejs.org/zh/
-3.x 使用vue-cli
-vite只能创建vue3 效率非常高
# 安装vue-cli
npm install -g @vue/cli
# 使用cnpm替换npm cnpm淘宝出的工具，下载的时候，去淘宝镜像下载，速度快
# -g 表示装全局
#--registry=https://registry.npm.taobao.org 指定淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后使用cnpm 代替npm
cnpm install -g @vue/cli
# cmd控制台就可以输入 vue 命令（装了djagno可以使用django-admin创建django项目）
-vue 创建vue项目
# 使用vue-cli创建项目(找个目录)
vue create myfirstvue # 速度很慢，等，可以ctrl+c停止 执行npm cache clean --force
# 很慢的原因
-从github拉一个空项目
-按照该项目所有的依赖，npm装
# 按下图操作
vue ui # 使用图形化界面创建项目 ，自己点击即可
vue项目目录介绍
# pychrm 打开项目，运行项目的两种方式
-在命令行中执行(注意路径)
-npm run serve
-使用 pycharm ，点击绿色箭头执行
vue项目目录介绍
myfirstvue # 项目名
node_modules # 非常多第三方模块,以后把项目复制给别人时【上传git要忽略掉】,这个文件夹删掉,很多小文件,项目的依赖，项目要运行，没有它不行，如果没有只需要执行cnpm install，根据package.json的依赖包，按装好依赖
public # 文件夹
-favicon.ico # 网站小图标
-index.html # spa单页面应用,以后要整个vue项目都是用这一个html,但是不用动他
src # 文件夹-以后都是动这里面的内容
-assets # 静态资源,以后前端用的图片,js，css都放在这里
logo.png # 图片
-components # 以后在这里放组件,xx.vue,小组件
HelloWorld.vue # 提供的展示组件
-router # 安装了Router,就会有这个文件夹,下面有个index.js
-store # 安装了Vuex，就会有这个文件夹，下面有个index.js
-index.js
-views # 页面组件
-AboutView.vue
-HomeView.vue
-App.vue # 根组件，new Vue实例管理了 div，以后原来写在div中的东西，现在都写在App.vue
-main.js # 项目的启动入口
.gitignore # git的忽略文件，后面学了git就会了
babel.config.js # bable配置文件，不用动
jsconfig.json # 配置文件，不用动
package.json #不用动，安装了第三方模块，它自动增加
package-lock.json # 锁定文件，忽略掉
README.md # 用户手册
vue.config.js # vue的配置文件
es6导入导出语法
APP.vue,main.js,About.vue写了什么
### 看xx.vue组件学到的重点#####
以后,开发vue项目,都按照这个模式来
1.新建xx.vue
2.在xx.vue中就三块内容
1.以后组件的html内容,都写在这里
<template>
</template>
2.以后该组件使用的样式,都写在这里
<style>
</style>
3.以后js的东西,都写在这
<script>
</script>
### main.js学到的
找到index.html中的id为app的div,以后都在App.vue中写
new Vue({
render: h => h(App)
}).$mount('#app')
导入导出语法
python创建包,在其他py文件中导入
from xxx import xx
js从es6开始,也支持包的导入和导出
### 默认导入语法(用的最多),只能到处一个,一般到处一个对象
-导出语法:
export default 一般是个对象
-导入语法:
import 别名 from '路径'
这样别名就是导出的对象
### 命名导出导入
-导出语法:可以导出多个
export const name='彭于晏'
export const add = (a,b)=>{
console.log(name)
return a+b
}
export conse age = 19
-导入语法
import {name,add} from './lqz/s1'
console.log(name)
console.log(add(33,44))
导入的简写形式
-包下的 index.js 导入的时候,不用写到index.js的路径 --->它等同于ptyhon的__init__.py
-例如:
包是
lqz
-index.js
导入的时候
import lqz from './lqz'
vue项目编写步骤
以后只需要写xx.vue
-页面组件
-小组件 给页面组件用的
组件中导出
export defaule {
name:'HelloWorld',
data(){
return {
xx:'彭于晏'
}
},
}
在别的组件中要用,导入,注册
导入
import HelloWorld from '../components/HelloWorld.vue'
# 注册
export default {
components: {
HelloWorld
}
}
注册以后，在这个组件中就可以使用导入的组件 ，写在<template>
# 自定义属性
<HelloWorld msg="传进来的p"/>
小练习-登录功能
App.vue 动了
<template>
<div id="app">
<router-view/>
</div>
</template>
main.js
# 没有动
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
访问根路径
访问根 显示 HomeView.vue 这个页面组件
-HomeView使用了Helloworld.vue
-自定义属性
访问/about 会显示AboutView.vue组件
使用axios
安装
cnpm install axios -S # 带着-S会自动把当前依赖加入到package.json中
或者用
npm install axios -S
导入(按照的第三方模块,直接导入)
import axios from 'axios'
使用
import axios from 'axios'
export default {
name: 'AboutView',
data() {
return {
username: '',
password: ''
}
},
methods: {
handleClick() {
console.log(this.username, this.password)
// 发送ajax请求
axios.post('http://127.0.0.1:8000/login',
{username: this.username, password: this.password}).then(res => {
alert(res.data.msg)
})
}
}
}
解决跨域问题
1.装模块
pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/
2.注册app
'corsheaders'
3.修改中间件
'corsheaders.middleware.CorsMiddleware',
4.修改配置文件
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',
'token'
)
scoped
# 父组件的样式，在子组件中会生效，加入scoped让该样式只在当前组件中生效
<style scoped>
h1 {
background-color: chartreuse;
}
</style>
props其他
# 安装依赖
cnpm install
# 做成纯净的vue项目
-在router的index.js中删除about路由
-删除所有小组件和abuout页面组件
-APP.vue只留
<template>
<div id="app">
<router-view/>
</div>
</template>
自定义属性,在子组件中接收传入的数据
# 方式一:使用数组
props:['name']
# 方式二:使用对象
props:{name:Number}
# 方式三:使用对象,默认值和必填
props: {
name: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
混入mixin
# 作用是:可以把多个组件共用的配置提取成一个混入对象
使用步骤:
1.定义混入对象,新建mixin包下新建index.js
2.在index.js中写代码(组件会用到的,data,methos。。。配置项)
export const lqz = {
data() {
return {
name: 'zh'
}
},
methods: {
showName() {
alert(this.name)
},
},
mounted() {
console.log('页面正在挂载执行')
}
}
3.局部使用(值在当前组件中使用)
# 使用插值语法的name就是混入的name,点击事件也是混入的点击事件
<div class="home">
<h2 @click="showName">{{name}}</h2>
</div>
import {lqz} from '@/mixin'
export default {
name: 'HomeView',
components: {},
mixins: [lqz] //配置项
}
4 全局使用(所有组件都可以用) main.js中
import {lqz} from '@/mixin'
Vue.mixin(lqz)
// Vue.mixin(lqz2) 下面表示可以多个混入
// Vue.mixin(lqz3)
5 在组件中,直接使用即可
插件
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
# 使用步骤
1.新建包plugins,新建index.js
import Vue from "vue";
import axios from "axios";
export default {
install(vue) {
console.log('执行了插件', vue)
// 可以做的事
// 1.了解,自定义指令(了解)
// 2.定义全局变量,以后在任何组件中都可以使用到，借助于Vue.prototype往里放,
// 以后所有组件只要this.$ajax,就是axios对象
Vue.prototype.$ajsx = axios
// 3.使用全局混入
// 4.自定义全局组件
}
}
2.在main.js中配置
# 使用自定义插件
import plugin from '@/plugins'
Vue.use(plugin)
elementui使用(重点)
# 在vue上，css样式，用的最多的是elementui，但是还有其他的
-elementui 做网页端 样式用的多 vue2的 饿了吗团队开发的
-elementui-plus 第三方团队继续基于vue3写的
-vant 做app的样式
-iview pc端用www.iviewui.com
# elementui的使用
1 安装
cnpm i element-ui -S
2 配置完整引入 在 main.js 中写入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI) // 以后在咱们组件中直接使用elementui提供的全局组件即可
3 在组件中使用
-去官网看到好的，复制贴到你的项目中
vues
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
# 使用步骤
1.新建store/index.js
2 在index.js 中写
export default new Vuex.Store({
state: {
# 放数据
},
mutations: {
# 放方法，正常是让actions中来调用
# 组件也可以直接调用
},
actions: {
# 放方法，正常组件调用
}
})
3.在组件中
-显示state的变量
html中:{{$store.state.变量名}}
js中:this.$store.state.变量面
改state中的值:
---按照正常步骤走:this.$store.dispatch('actions中的方法',参数)---》actions中的方法调用 context.commit('mutations',参数)---》在mutations中直接修改state的值
---可以跨过任何一步
this.$store.commit()
this.$store.state.变量名
代码展示
vue文件中
<template>
<div class="home">
# 这里显示state里面所定义的数据
<h1>{{$store.state.num}}</h1>
# 这里是一个点击事件,点击触发改变state里面的数据值
<button @click="addClick">点击增加</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
methods:{
addClick(){
# 点击事件触发,$store.dispatch方法,其实是actions里面定义的方法,传参
this.$store.dispatch('add',1)
},
},
}
</script>
store里面的方法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 放数据
num: 1
},
getters: {},
mutations: {
//直接在这个方法里面定义方法改变state里面的数据值
add(state, value) {
state.num += value
}
},
actions: {
//在vue界面触发这个方法的执行,固定的参数，然后这个方法触发mutations里面方法的执行
add(context, value) {
context.commit('add', value)
}
},
modules: {}
})
vue Router
第三方插件,用来实现SPA的vue插件
-单页面应用---》实现在一个index.html中有页面跳转效果的,插件
-路由控制
-<router-link> 跳转用
-<router-view/> 替换页面组件用
基本使用
-1 创建vue项目时加入了,直接用即可
-如果之前没装,先下载,在项目中创建router包,写个index.js如果有就不用写
-2 配置路由的跳转(跳转页面组件),只需要在routes数组中写对象即可
const routes = [
{
path: '/', // 这里表示路径
name: 'index', //起别名跟我们django类似
component: Index //路径触发的vue组件
},
{
path: '/home',
name: 'home',
component: Home
}
]
-3 一定要写个视图组件 Home
路由跳转的两种方式一：
js控制:绑定一个点击事件,触发直接跳转链接
<button @click="addClick">点击跳转登录</button>
addClick(){
this.$router.push('login')
}
标签控制:直接是一个链接的标签,点击就会自动跳转
<router-link to="/login">点击跳转登录</router-link>
两种跳转方式二:
使用对象方式
-this.$router.push({
name: 'login', //这里的name就是我们在路由中写的别名
// query: {
// name: 'lqz',
// age: 19
// },
params: {
id: 88
}
}) # 这里可以写个对象
-标签形式跳转，传对象形式
<router-link :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
<button>点我跳转到home页面</button>
</router-link>
路由跳转携带数据的两种方式
1. /course/?pk=1 带在路径中使用?携带
拿数据:this.$route.query.pk
2. /course/1/ 路径中携带的
-router/index中路径需要改一下
{
path: '/login/:id',
name: 'login',
component: Login
},
拿数据:this.$route.params.id
区分this.$route和this.$router
-this.$route # new VueRouter对象,实例,可以实现路由的跳转
-this.$route # 是当前路由对象,内部有传入的参数
路由守卫
全局守卫
-前置路由守卫,在进路由前,执行代码
-后置路由守卫,路由跳转走,执行代码
如何用：router/index.js 加入
// 全局前置路由守卫--->任意路由跳转都会触发它的执行
router.beforeEach((to, from, next) => {
// to 是去哪，哪个路由对象
// from 是来自哪，是哪个路由对象 比如从 /--->/login
// next 是函数，如果加括号执行，就会真正的过去
console.log('前置路由守卫', to, from, next)
// next() // 真正跳转到 要去的路径
if (to.name == 'login') {
console.log('走了')
next()
} else {
var res = localStorage.getItem('userinfo')
if (res) {
next()
} else {
alert('您没有登录')
// 跳转到login--->没有解决---》你们搜一下如何解决
// console.log(this)
// router.push('/login')
}
}
})
locklStorage系列
都是在浏览器中存储数据的---》存数据有什么用？
-登录成功，token存在本地
-不登录加入购物车功能,迪卡侬存在了localStorage中
-组件间通信---》跨组件
localStorage
-永久存储,除非清空缓存,手动删除,代码删除
localStorage.setItem('userinfo',JSON.stringify(this.userinfo)) //存数据
console.log(localStorage.getItem('userinfo')) // 拿数据
localStorage.clear() //清除全部
localStorage.removeItem('userinfo') //清除指定
sessionStorage
-关闭浏览器，自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear() // 清空全部
-sessionStorage.removeItem('userinfo')
cookie
-有过期时间，到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET10 - 预览版1新功能体验（一）