一个vue ui初始化的vue项目有多少知识点？

最新推荐文章于 2022-10-26 19:16:36 发布

晓倾城

最新推荐文章于 2022-10-26 19:16:36 发布

阅读量1.5k

点赞数 2

分类专栏：前端文章标签： html5 vue.js

本文链接：https://blog.csdn.net/qq_40850266/article/details/124220511

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

1 使用vue ui创建项目

找一个创建项目的文件夹cmd打开命令窗口
输入

vue ui

在这里插入图片描述
此时会自动打开可视化页面

点击左下角小房子会来到项目管理页面

选择文件夹创建项目

手动创建项目

可以选择一些依赖，和去掉强制代码检查的eslint

下一步创建项目

按照需要选择是否保存
在这里插入图片描述
接下来等

启动你的初始化项目

访问你的项目

2 项目目录

在这里插入图片描述

3 路由

在这里插入图片描述

当uri（router-link）和路由配置中匹配的时候会把对应的页面或者组件渲染到router-view标签

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>

4 页面渲染解读

4.1 vue挂载目标

在这里插入图片描述

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

程序通过main.js将vue和html文件进行了巧妙的绑定,App.vue就被挂在到了#app这个div

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

那我们再看看App.vue里面是啥

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

正是第三个知识点里面的路由，当我们访问项目地址时候

http://localhost:8081/#/

可以看见uri是一个斜杠，那么router-view就被渲染为斜杠对应的Home视图

  {
    path: '/',
    name: 'Home',
    component: Home
  }

让我们看看Home里面都是什么

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

发现是一个log和一个HelloWorld组件

4.2 组件传值

在Home页面里面的HelloWorld 标签属性是msg

<HelloWorld msg="Welcome to Your Vue.js App"/>

我们再看看HelloWorld 里面可以通过两个花括号把值给传递进去，这就是最后的页面在这里插入图片描述

让我们换一下值？

<HelloWorld msg="欢迎来到模块化开发的vue项目"/>

在这里插入图片描述
发现确实是这样的组件标签的属性被花括号提取出来了。

晓倾城

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
一个vue ui初始化的vue项目有多少知识点？

一个vue ui初始话的vue项目有多少个知识点？
复制链接

扫一扫

专栏目录

一个vue ui初始化的vue项目有多少知识点？

1 使用vue ui创建项目

2 项目目录

3 路由

4 页面渲染解读

4.1 vue挂载目标

4.2 组件传值

“相关推荐”对你有帮助么？