关于vue简单创建项目and功能轻教学
作者：互联网
新建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