标签：vue 创建 setup component 教学 组件 router 路由
新建vue单页面应用
一共有两种方式：
-
vue/cli
-
vite
vue/cli
vue/cli是基于webpack
npm install -g @vue/cli
这样就可以在全局安装vue/cli，输入命令，查看安装是否成功
vue --version
#or
vue -V
能出现对应的vue/cli的版本，即为安装成功。
在这一步过程中，很可能会出错，出错率10%左右，如果安装明明成功了，但是无法显示版本号，并且提示vue not ...command，则为环境变量需要配置。
npm list -g
查看全局环境下，包安装路径，复制其，配置电脑的环境变量，重启cmd即可。
vue/cli安装成功后，即可新建项目
使用vue/cli新建项目有两种方式
命令行新建
vue create hello-world
中间经过若干步骤，按需导入使用。
O Babel 把es6等高端代码转成低端代码，供低版本浏览器使用
O TypeScript TS微软新出的一门语言，可以用来生成js
o Progressive Web App (PWA) Support 移动端app支持
o Router 路由
o Vuex 一种统一状态管理工具（存数据的）
o CSS Pre-processors css预处理器支持（可以用来把less等高端css语言转成普通css）
• Linter / Formatter （代码风格）
o Unit Testing 测试
O E2E Testing 测试
vue ui新建（不推荐）
vue ui
正常情况下，会自动打开默认浏览器页面，进行配置
如果出错，检查把杀毒软件都关掉
使用vite新建
不基于webpack，速度更快，体积更小，仅支持vue3.x，不支持2.x，并且目前还不是很稳定，正在完善中，建议将来使用。
npm init vite-app hello-world
如果报错：
Need to install the following packages:
create-vite-app
Ok to proceed? (y)
输入y进行安装create-vite-app即可。
项目目录
babel.config.js babel配置文件
dist 生成的用于上线的低端代码
jsconfig.json js配置文件
node modules 包仓库
package-lock.json package的升级版，把包固定在某个版本
package.json 项目配置文件
public 公共文件
README.md
src 程序员开发写的内容
App.vue 主组件
assets 静态文件
components 组件盛放文件夹
main.js 主要js（入口js）
vue.config.js vue配置文件
vue项目的运行流程
在工程化的项目中，vue要做的事很单纯，就是通过main.js将App.vue渲染到index.html的指定区域（一般默认为id为app的div）中
其中：
App.vue用来编写待渲染的模板结构
index.html中需要预留一个el区域也就是待替换区域
main.js把App.vue渲染到index.html所预留的区域中
组件
新建组件，引入组件，注册组件，使用组件
什么是组件化开发
组件化开发指的是： 根据封装的思想，把页面上的可重复使用的UI结构封装成组件，
从而方便项目的开发与维护。
vue是一个支持组件化开发的前端框架
vue组件名首字母大写
vue中规定：组件的后缀名是·vue。之前接触的App.vue文件本质上就是vue的一个组件。
vue组件的三个组成部分：
template ： 组件的模板结构 （必须具备） vue2.0在使用时template里只允许一个根节点
script ： 组件的js行为
style ： 组件的样式
注意：每个组件必备template模板结构,而script行为和style样式是可选的组成部分。
让style中支持less语法
<style lang="less">
//lang="less"属性，启用less语法
</style>
组件的data必须是函数
使用组件的三个步骤
使用import语法导入需要的组件
import Header from '@/components/Header.vue'
使用components节点注册组件
export default{
components:{
Header
}
}
以标签形式使用刚才注册的组件
<div class="box">
<Header></Header>
</div>
通过components注册的是私有子组件
注册全局组件
在vue项目的main.js入口文件中，通过Vue.component( )方法，可以注册全局组件.
//导入需要全局注册组件
import App from '@/components/App.vue'
//参数1 : 字符串形式， 表示组件的’注册名称‘（自定义）
//参数2 ： 需要被全局注册的组件
Vue.compoent('App',App)
父子间的传值
父传子用props（props验证，指定默认值，指定多个数据类型）
子传父用$emit（传参）
vue-router路由
vue3.0项目中如何配置路由(五个步骤)
新建一个项目，初始化npm i 下载vue-router，在路由文件中引入相关依赖
import {createRouter,createWebHashHistory} from 'vue-router'
创建路由信息对象数组
routes:[
{path:'/bar',component:Bar}, //route ，每一组路由信息对象
{path:'/foo',component:Foo},
//动态路由的设置
//的一种传参方式：params传参
//{path:'/user/:id/:name/:age',component:User}
//第二种传参方式，props值为布尔值是
{path:'/user/:id/:name/:age',component:User,props:true},
// 第三种传参方式，props为函数时
{path:'/user',
name:'user',
component:User,
props(route){
return{
id:route.params.id,
name:route.params.name,
age:route.params.age
}
}}
]
创建路由管理对象并对外抛出
//创建路由管理器对象
const router = createRouter({
history:createWebHashHistory(),
routes:[
{path:'/bar',component:Bar}, //route ，每一组路由信息对象
{path:'/foo',component:Foo},]
})
在main.js使用use(router)方法，将路由管理器对象与当前vue项目相关联
import router from './router'
createApp(App).use(router).mount('#app')
在项目中设置路由导航router-link与路由出口router-view
<router-view />
<router-link to="/bar">Bar</router-link>
<router-link to="/foo">Foo</router-link>
route routes router之间的区别
1,route: 一组路由信息对象
{path:'/foo',component:Foo},
2.routes:路由信息对象数组
routes:[
{path:'/bar',component:Bar},
{path:'/foo',component:Foo}
]
3,router : 路由管理器对象
const router = createRouter({})
动态路由
定义： 我们经常需要把某种模式匹配到所有的路由，全都映射到同一个组件。
例如：我们有一个User组件，对于所有id各不相同的用户，都有使用这个组件渲染
组件间的数据通信
父子组件之间的数据通信
vue合成API setup()
vue3.0最重要的新特性之一
vue作用：之前vue对象规定了我们必须把某一类数据放到某一类结构中，这样一定程度上对我们的代码进行了强制分割。
在vue3.0中我们引入了setup()合成API语法，他可以将某数据关联的内容整合在一个部分，即使setup中内容越来越多，也会围绕着大而不乱的形式开发项目。
import { ref } from 'vue'
export default {
setup(){
const count = ref(0)
function changeCount(){
count.value++
}
return { count,changeCount}
},
}
setup( )特点
setup( )结构中定义的变量，函数都需要return之后才可以在模板中使用
setup（ ）是处于created生命周期之前的函数，也就是说data,methods中的数据无法访问到的，setup（）结构中的this指向undefined
1.reactive 在setup中包装对象.数组形式的数据，使其变成响应式数据
2.ref 在setup中只能包裹字符串或数字形式的数据（值），使其变为响应式数据
3.torefs 可以直接在Html模板中使用对象的属性名当变量，不需要使用 . 访问
import { ref,toRefs,reactive } from 'vue'
const count = ref(0);
function changeCount() {
count.value++;
}
const arr = reactive([1, 2, 3, 4, 6]);
return { count, ...toRefs(student), arr, changeCount };
生命周期函数和vue3.0setup（ ）中使用
Vue生命周期是指vue实例对象从创建之初到销毁的过程。
先引入
import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "vue";
标签：vue,创建,setup,component,教学,组件,router,路由 来源： https://www.cnblogs.com/lcw0/p/16250428.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。