其他分享
首页 > 其他分享> > 关于vue简单创建项目and功能轻教学

关于vue简单创建项目and功能轻教学

作者:互联网

 

新建vue单页面应用

一共有两种方式:

  1. vue/cli

  2. 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