Vue项目技术汇总

nvm install 8.11.1 #下载8.11.1
nvm use 8.9.0 #使用8.9.0
nvm alias default 6.10.0 #设置默认版本

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    port:3000 // 配置访问接口 http://localhost:3000/
  }
})

# npm 6.x
npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线
npm init vite@latest <project-name> -- --template vue

cd <project-name>

npm install

npm run dev

// 安装脚手架  
`npm install -g @vue/cli`
// 更新脚手架  
`npm update -g @vue/cli`

选项式API (Vue2)
使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted
选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例
代码结构
<template>
</template>
<script>
export default {
  // 数据结构
  data (){return {}},
  // 方法
  methods: {},
  //计算属性 计算属性与数据结构同级，都是用来表示数据，但是计算属性可以加上逻辑处理
  computed: {},
  //侦听器 可以监控数据变化前后的值
  watch:{},
  //生命周期钩子
  mounted() {},
}
</script>


组合式API (Vue3)
组合式API是使用导入的方式来描述组件逻辑，通常会与 <script setup> 搭配使用
<script setup> 里面的代码会被编译成组件 setup() 函数的内容
<script setup>
  import {ref, computed, watch, onMounted} from 'vue'

  // 创建响应式数据
  let username = ref('')
  
  // 事件绑定
  function ClickMe()
  {
    alert('触发事件')
  }

  // 计算属性 计算属性与数据结构同级，都是用来表示数据，但是计算属性可以加上逻辑处理
  let count = computed(() => {
    var num = 150.417
    return num.toFixed(2)
  })

  //侦听器 可以监控数据变化前后的值
  watch(username, (newVal, oldVal) => {
    console.log(newVal, oldVal)
  })

  // 获取组件中ref="hello"的真实dom元素
  const hello = ref(null)

  // 生命周期钩子
  onMounted(() => {
    console.log(hello.value) // <input type="text">
    console.log(hello.value.value) // 张三
  })
</script>

<template>
  <input type="text" v-model="username" />
  {{username}}
  <br />

  <button @click="ClickMe">绑定事件-简写方式</button>

  <h1>计算属性</h1>
  {{count}}

  <h1>Ref用法 获取DOM节点</h1>
  <input type="text" value="张三" ref="hello" />
</template>

选项式API (Vue2)
<template>
	<input type="text" v-model="username" />
	<h1>{{username}}</h1>
</template>

<script>
	import {ref} from 'vue'
	export default {
		setup(props, context)
		{
			//获取传递的属性
			console.log(props)

			// 获取传递的自定义属性（非响应式的对象，等价于 $attrs）
			console.log(context.attrs)

			// 插槽（非响应式的对象，等价于 $slots）
			console.log(context.slots)

			// 触发事件（函数，等价于 $emit）
			console.log(context.emit)

			// 暴露公共属性（函数）
			console.log(context.expose)


			let username = ref('hello world')

			return {
				username
			}
		}
	}
</script>

组合式API (Vue3)
<script setup>
	import {ref} from 'vue'

	let username = ref('hello world')

	// defineProps()   定义组件传参属性方法
	// defineEmits()   定义组件传参事件方法
	// defineExpose()  暴露当前组件的数据和方法
	// useSlots()  获取插槽对象
	// useAttrs()  获取自定义属性对象
</script>

<template>
	<input type="text" v-model="username" />
	<h1>{{username}}</h1>
</template>

<script setup>
    // 引入响应式数据
	import { ref, reactive, toRef, toRefs, readonly } from 'vue'


    // --------- ref（简单） ---------
	// 创建单个响应式数据
	let username = ref('张三')

	// 修改单个响应式数据
	setTimeout(() => {
		username.value = '李四'
	}, 3000)


    // --------- reactive（复杂） ---------
	// 创建复杂类型响应式数据
	let info = reactive({
		name: '张三',
		age: 20,
		sex: '男'
	})

	// 修改复杂类型响应式数据
	setTimeout(() => {
		info.name = '李四'
		info.age = 30
		info.sex = '女'
	}, 3000)


    // --------- toRef（从复杂中抽离单个） ---------
	// 单个的抽离
	let name = toRef(info, 'name')


    // --------- toRefs（从复杂类型中抽离多个） ---------
	// 抽离多个元素 抽离的元素 必须是 info 对象中有的属性
	let {sex ,age} = toRefs(info)


    // --------- readonly（只读） ---------
	//设置只读属性
	let readname = readonly(username)
</script>

<template></template>

Vue2中使用前需要再data中现将需要使用的数据定义出来
data:{
	user:{
		name:"sally",
		age:31,
		gender:"male",
		salary:"secret"
	},
	list:[1,2,3,4]
}
			
对象使用：
（1）全局方法：Vue.set(user, 'address', 'beijing')（对象名，键名，键值）
（2）实例方法：vm.$set(user, 'address', 'beijing')

数组使用：
（1）全局方法：Vue.set(list, 2, 10)（数组名，下标，新的数据）
（2）实例方法：vm.$set(list, 3, 8)

<template>
    <!-- 4、通过v-bin绑定自定义属性（ ：属性名  简写） -->
    <Son1 :name="nametext"></Son1>
</template>

<script>
    import { ref } from 'vue'
    <!-- 1、引入子组件 -->
    import Son1 from './son1.vue'

    export default {
        <!-- 3、使用setup()钩子设置需要传递的数据 -->
        setup ()
        {
            const nametext = ref('张三')
            return nametext
        },
         <!-- 2、注册子组件 -->
        components: {
            Son1
        }
    }
</script>

<template>
    <!-- 3、直接使用 -->
    <div>{{name}}</div>
</template>

<script>
    import { toRef} from 'vue'
    
    export default {
        <!-- 1、声明props自定义属性 -->
        <!-- 特别说明：此处name是父组件中子组件标签上的属性名，不是参数名 -->
        props: 
        {
            name: String,
        },
        <!-- 2、通过setup()接收数据 -->
        setup(props)
        {
            console.log(props.name)
            console.log(name.value, age.value)
        }
    }
</script>

<script setup>
  import {ref} from 'vue'
  import Son1 from './son1.vue'

  let text = ref('张三')
</script>

<template>
  <!-- 父组件向子组件传递数据 -->
  <Son1 :name="text"></Son1>
</template>

<script setup>
  //接收props参数
  const props = defineProps({
    name: String,
  })

  console.log(props)
</script>

<template>
  {{props.name}}
</template>

<template>
    <Son2 @SubClick="SubClick">parent</Son2>
</template>

<script>
    import { ref } from 'vue'
    import Son2 from './son2.vue'

    export default {
        setup ()
        {
            function SubClick (data)
            {
                // 接收子组件传递过来的数据
                console.log(data)
            } 

            return SubClick
        },
        components: {
            Son2,
        }
    }
</script>

<template>
    <!-- 父组件向子组件传递数据 -->
    <button @click="HandleClick">Children</button>
</template>

<script>
    export default {
        setup (props, context)
        {
            let { attrs, slots, emit } = context

            <!-- // vue3.x 获取组件上的属性
            console.log(attrs.SubData)

            // vue3.x 获取slot插槽的节点
            console.log(slots.default()) -->

            // vue3.x emit方法(子组件向父组件传递数据)
            function HandleClick ()
            {
                emit('SubClick', 'vue3.x - this is subData')
            }

            return HandleClick
        }
    }
</script>

<script setup>
  import {ref} from 'vue'
  import Son2 from './son2.vue'

  //自定义事件
  function SubClick(data)
  {
    //接收子组件传递过来的数据
    console.log(data)
  }
</script>

<template>
  <!-- 子组件向父组件传递数据 -->
  <Son2 SubData="some other data" @SubClick="SubClick"></Son2>
</template>

<script setup>
  import { useSlots, useAttrs } from 'vue'

  // useSlots()  获取插槽对象  
  // useAttrs()  获取自定义属性对象  
  const attrs = useAttrs()
  const slots = useSlots()

  // 获取组件上的属性
  console.log(attrs)

  // 获取slot插槽的节点
  console.log(slots)

  // emit方法(子组件向父组件传递数据)
  const emit = defineEmits(['SubClick'])
  
  function HandleClick()
  {
    emit('SubClick', 'vue3.x - this is subData')
  }
</script>

<template>
  <!-- 子组件向父组件传递数据 -->
  <button @click="HandleClick">子组件传递数据</button>
</template>

<template>
    <h1>Vue3新特性 - provide 与 inject (父组件向子组件传递数据与方法)</h1>
	<Son3></Son3>
</template>

<script>
	import { ref, provide } from 'vue'
	import Son3 from './son3.vue'

	export default {
		setup()
		{
			const name = ref('张三')

			// provide(别名, 要传递的数据和方法)
			provide('myName', name)
			provide('HandleClick', () => {
				name.value = 'zhangsan'
			})
		},
		components: { Son3 }
	}
</script>

<template>
    <button @click="HandleClick"> {{ name }} 点击一下我</button>
</template>

<script>
    import { inject } from 'vue'

    export default {
        setup()
        {
            const name = inject('myName')
            const HandleClick = inject('HandleClick')

            return {
                name,
                HandleClick
            }
        }
    }
</script>

const test = () => {
	return '全局方法'
}

const app = createApp(App)
	.mount('#app')
	
//全局依赖注入
app.provide('$test', test)

<script setup>
	import { inject } from 'vue'
	
	//调用注入的全局方法
	const test = inject('$test');
	console.log(test())
</script>

<template>
  <h1>Vue3新特性 - 插槽新写法</h1>
  <Son4>
    <!-- Vue2.x写法
    <div slot="parent">
      <div>父组件</div>
    </div>
    -->
    
    <template v-slot:parent>
      <div>父组件</div>
    </template>
  </Son4>
</template>

<script>
  import Son4 from './son4.vue'

  export default {
    components:{
      Son4
    }
  }
</script>

<template>
	<slot name='parent'>子组件</slot>
</template>

<template>
  <h1>Vue3新特性 - 作用域插槽</h1>

  <Son5>
    <!-- <template slot="content" slot-scope="scoped">  -->
    <template v-slot:content="scoped">
      <div>{{scoped.myName}}</div>
    </template>
  </Son5>
</template>

<script>
  import Son5 from './son5.vue'
  export default {
    components: {
      Son5
    }
  }
</script>

<template>
	<slot name="content" :myName="myName"></slot>
</template>

<script>
import { ref } from 'vue'
export default {
	setup () 
	{
		let myName = ref("hello world")
		return { myName }
	},
}
</script>

//引入路由对象
import { createRouter, createWebHashHistory} from "vue-router"

//引入组件
import home from './components/home.vue'
import about from './components/about.vue'

// 创建路由
export default createRouter({
    history: createWebHashHistory(), //hash路由模式
    linkExactActiveClass: 'active',  //点击路由跳转的底部样式标量
    //路由列表
    routes: [
        {
            //默认首页
            path: '/',
            name: 'home',
            component: home
        },
        {
            path: '/about',
            name: 'about',
            component: about
        },
    ]
})

import router from './router'

createApp(App)
    .use(router)
    .mount('#app')

<template>
    <router-view></router-view>

    <h1>路由构建</h1>
    <router-link to="/">去首页</router-link><br />
    <router-link to="/about">关于我们</router-link><br />
</template>

//引入路由对象
import { createRouter, createWebHashHistory} from "vue-router"

//引入组件
import list from './components/list.vue'
import info from './components/info.vue'

// 创建路由
export default createRouter({
    history: createWebHashHistory(), //hash路由模式
    linkExactActiveClass: 'active',  //点击路由跳转的底部样式标量
    //路由列表
    routes: [
        {
            path: '/list',
            name: 'list',
            component: list
        },
        {
            path: '/info/:id',
            name: 'info',
            component: info
        },
    ]
})

<template>
    <router-view></router-view>

    <h1>路由操作</h1>

    <p>
        接收 query 参数的时候 需要使用 path属性<br />
        接收 params 参数的时候 需要使用 name属性<br />
    </p>

    <!-- 路由跳转组件 -->
    <router-link to="/list">跳转到列表路由(无参数)</router-link><br />
    <router-link :to="{path:'/list', query:{keyword:123}}">跳转到列表路由(有参数)</router-link><br />
    <router-link :to="{name:'info', params:{id:100}}">跳转到详细页面路由</router-link><br />
</template>

<template>
	<h1>列表页面</h1>
	接收query参数 {{$route.query}}
</template>

<template>
	<h1>详细界面</h1>
	接收params参数 {{$route.params}}
</template>

// 项目路由结构
localhost:3000   一级路由  二级路由  
                  /                   -> 首页 
                  /business           -> 用户相关 
                          /login      -> 用户登录界面   
                          /register   -> 用户注册界面  

//index.js
//引入路由对象
import { createRouter, createWebHashHistory } from 'vue-router'

//引入当前目录下面所有的JS文件
const modfile = import.meta.globEager('./*.js')

//路由集合
const RouterList = []

// console.log(Object.keys(modfile)) //提取对象中所有的key 放到一个数组中
// console.log(Object.values(modfile)) //提取对象中所有的value 放到一个数组中
Object.values(modfile).map(async mod => {
    if(mod.default) await RouterList.push(mod.default)
})

//创建路由对象
export default createRouter({
    history: createWebHashHistory(), //设置路由模式
    linkExactActiveClass: 'active', //当前所匹配的链接
    routes: RouterList, //路由列表
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

//引入读取路径的一个nodejs模块
import path from 'path'

// 引入自动导入组件插件
import Components from 'unplugin-vue-components/vite'

// 自动导入vue，项目插件库
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  // 别名配置
  resolve: {
    alias: {
      //设置路径的别名
      // __dirname 当前所在的目录 /shop
      // path.resolve 拼接路径 /shop/src
      "@": path.resolve(__dirname, "src"),
      'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
    }
  },
  // 访问端口设置
  server: {
    port: 3000
  },
  plugins: [
    vue(),
    //设置自动加载规则
    Components({
      // 指定组件位置，默认是src/components
      dirs: ['src/components'],
      extensions: ['vue'],
    }),
    //自动导入库
    AutoImport({
      imports: ['vue', 'vue-router']
    })
  ]
})

// Business.php (API接口文件控制器)
<?php
namespace app\shop\controller;
use think\Controller;

// 引入API接口文件
use app\common\controller\Api;

/**
 * 用户接口
 */
// 继承Api
class Business extends Api
{
    public function __construct()
    {
        parent::__construct();   
        $this->BusinessModel = model('Business.Business');
    }

    // 此处注解需要参考命令行>一键生成API文档
    /**
     * 用户注册
     *
     * @ApiTitle    (用户注册)
     * @ApiSummary  (用户注册)
     * @ApiMethod   (POST)
     * @ApiParams   (name="mobile", type="string", required=true, description="手机号")
     * @ApiParams   (name="password", type="string", required=true, description="密码")
     * @ApiReturnParams   (name="code", type="integer", required=true, sample="0")
     * @ApiReturnParams   (name="msg", type="string", required=true, sample="返回成功")
     * @ApiReturnParams   (name="data", type="object", sample="{'user_id':'int','user_name':'string','profile':{'email':'string','age':'integer'}}", description="扩展数据返回")
     * @ApiReturn   ({
         'code':'1',
         'msg':'返回成功'
        })
     */
    // 具体的接口方法（reigster注册接口）
    public function reigster()
    {
        if($this->request->isAjax())
        {
            $mobile = $this->request->param('mobile', '', 'trim');
            $password = $this->request->param('password', '', 'trim');
            var_dump($mobile, $password);
        }
    }
}

//一键生成API文档
php think api --force=true
//指定https://www.example.com为API接口请求域名,默认为空
php think api -u https://www.example.com --force=true
//输出自定义文件为myapi.html,默认为api.html
php think api -o myapi.html --force=true
//修改API模板为mytemplate.html，默认为index.html
php think api -e mytemplate.html --force=true
//修改标题为FastAdmin,作者为作者
php think api -t FastAdmin -a Karson --force=true
//查看API接口命令行帮助
php think api -h

-u, --url[=URL]            默认API请求URL地址 [default: ""]
-m, --module[=MODULE]      模块名(admin/index/api) [default: "api"]
-o, --output[=OUTPUT]      输出文件 [default: "api.html"]
-e, --template[=TEMPLATE]  模板文件 [default: "index.html"]
-f, --force[=FORCE]        覆盖模式 [default: false]
-t, --title[=TITLE]        文档标题 [default: "FastAdmin"]
-a, --author[=AUTHOR]      文档作者 [default: "FastAdmin"]
-c, --class[=CLASS]        扩展类 (multiple values allowed)
-l, --language[=LANGUAGE]  语言 [default: "zh-cn"]