# shopvue

**Repository Path**: ningdiadmin/shopvue

## Basic Information

- **Project Name**: shopvue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-25
- **Last Updated**: 2024-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

sudo chmod -R 777 * && git add . && git commit -m 'Submit Code' && git push origin master


/project
	.gitignore				git仓库忽略文件
	index.html				页面入口文件
	package.json				安装包依赖文件
	vite.config.js			vite配置文件  === config.php
	node_modules/				依赖包   === vender
	public/					公共访问目录  === public
	dist/						打包目录
	src/						开发逻辑目录 === application
	
	
/src
	App.vue					项目入口文件 === view/layout.html
	main.js					项目的核心文件 === public/index.php
	assets/					放置一些图片，如logo等
	components/				组件目录   ==== view 视图

package.json  -> npm 创建出来的
scripts -> 命令列表
dependencies -> 生产阶段依赖包
devDependencies -> 开发阶段依赖包

启动命令
npm run dev 
yarn dev

找东西：
1、index.html (程序的入口文件、vue应用的div容器 id=app)

import { createApp } from 'vue' 引入vue框架

App -> 根组件(父组件)
    HelloWorld.vue(子组件)

Thinkphp MVC
Vue M V VM(视图模型-控制器-组件)


Vue 风格代码 Vue2/Vue3

Vue2 选项式的风格
	{
		data:{}
		methods:{},
		computed:{},
		watch:{},
		onCreated(){}
	}

Vue3 组合式的风格 == php通讯录很相似 上面php 下面的html
<script>
	import {ref} from 'vue3'

	//写php源生代码
	let username = ref('张三') //创建一个data的数据
</script>


Vue2 -> Object.defineProperty 定义属性的方法 

Vue3 -> Proxy 代理对象 完成数据的绑定

父子通信
父->子：传递属性props
子->父：传递事件方法event(emits)

全局的传参方式
传递：provide('demo') 
接收：inject('demo')

v-if 只会渲染满足条件的一条
v-show 会直接插入到页面中  只是通过css 设置显示还是隐藏而已

万能标签
插槽 
<slot name="header"></slot>
<slot name="footer"></slot>


demo.vue
<template slot="header">
	<header>头部</header>
</template>

demo2.vue
<template slot="header">
	<h3>头部</h3>
</template>

slot -> 组件内插槽
teleport -> index.html 全局入口页面的插槽

安装路由
npm install vue-router@4
yarn add vue-router@4


#/

# 锚点功能 hash模式
/ 默认路由

Vue 单页面应用


path: /info/:pid   -> params 传参 跳转需要用 name 属性来跳转
path: /search -> query 传参 跳转就正常使用 path 属性来跳转

/business/index
/business/profile
/business/login

路由嵌套
/business    -> 父路由
	/index   -> 子路由
	/profile
	/login


Vue -> 声明周期  beforeMounted onMounted
Router -> 钩子函数全局 beforeEach(进入路由前) afterEach(进入路由后)

/business/index 进入路由前，判断是否登录，meta:{auth:true}


<p></p>
拓展一套 UI框架进来


搭建第一个 Vite 项目
yarn create vite


Vue  和  Thinkphp 对比
Thinkphp MVC 工具具备的很全面 cookie session 分页 文件上传....
Vue MVVM 不具备常见开发功能 它仅仅只是一个纯裸框架的
Vue纯裸的框架上 不断去迭代功能 让他逐渐变成 Thinkphp模样
造轮子的过程 Nuxt框架 == Thinkphp


造轮子搭建过程：
1、添加别名路径变量
2、安装路由：yarn add vue-router@4 -S
3、安装整合路由插件：
	yarn add vite-plugin-pages -S
	yarn add vite-plugin-vue-layouts -S
4、官方的工具包，自动引入
	yarn add unplugin-auto-import -S
5、安装UI框架，移动端
	yarn add vant -S
6、全局自动导入自定义组件
	yarn add unplugin-vue-components -S
7、安装城市数据包
	yarn add @vant/area-data -S


Main.js 
createApp(App).use(tools)

.use() => tools -> export default => install(app) {挂载的东西}

app = createApp(App) = 全局的Vue应用

创建TP的模块
php think build --module shop
php think make:controller shop/Business

安装axios请求模块


前端发送的时候：http://localhost:5173/shop/business/login

反向代理：vite.config.js http://www.fast.com/shop

http://www.fast.com/shop/shop/business/login

后端接口地址：http://www.fast.com/shop/business/login

fastadmin后端：phpstudy -> apache
vue -> vite构建工具 -> server(服务器软件)

http服务(apache == nodejs)

vite == webpack ->webpack-dev-server(http服务器功能) == apache 


vue2 -> vue.cli -> webpack/webpack-dev-server
vite(server - nodejs)


cookie
vue全家桶
	vuex -> vue2/vue3
	pinia -> vuex

vuex、pinia 状态管理
vuex -> state(data数据) -> action -> mutation -> getter(computed)
state: data数据
getter: 获取器
mutation: setter修改器
action: 提交一个修改动作

pinia
state: data数据
getter: 获取器
action: 提交一个修改动作


安装pinia 本地存储localStorage
yarn add pinia -S
yarn add pinia-plugin-persist -S