【Vue】vue-cli一站式搭建SPA项目

news2025/1/12 3:49:55

🎉🎉欢迎来到我的CSDN主页！🎉🎉

🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

🌟推荐给大家我的专栏《Vue快速入门》。🎯🎯

👉点击这里，就可以查看我的主页啦！👇👇

Java方文山的个人主页

🎁如果感觉还不错的话请给我点赞吧！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖

请添加图片描述

目录

一、什么是vue-cli

1.1如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

1.2.如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

1.3.CLI是什么意思？

1.4.脚手架长什么样？

1.5.脚手架依赖于node.js和webpack

二、安装vue-cli脚手架

 2.1.安装vue-cli

 2.2.创建SPA项目

 2.3.一问一答模式答案

三、 运行SPA项目

3.1.导入项目

3.2.运行项目 

四、基于SPA项目完成路由

4.1.案例实操

 ①引入依赖库

  ②定义组件

  ③定义路由与配置路由路径

  ④定义触发路由的按钮

4.2.效果展示  ​编辑

五、基于SPA项目完成嵌套路由

5.1.案例实操

①定义组件

  ②定义路由与配置路由路径

5.2.效果展示

一、什么是vue-cli

1.1如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

1.2.如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

  • 1.2.1使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
  • 1.2.1如果每个项目都要手动完成这些工作，那么无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

1.3.CLI是什么意思？

  • 1.3.1.CLI是Commond-Line Interface，翻译为命令行界面，俗称脚手架。
  • 1.3.2.VueCLI是一个官方发布vue.js项目脚手架。
  • 1.3.3.使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。

1.4.脚手架长什么样？

1.5.脚手架依赖于node.js和webpack

二、安装vue-cli脚手架

//默认安装脚手架3
npm install -g @vue/cli
 
//安装脚手架2
npm install -g @vue/cli-init
 
//脚手架2创建项目
vue init webpack my-project
 
//脚手架3创建项目
vue create my-project

 2.1.安装vue-cli

效果如下图：

 2.2.创建SPA项目

效果如下图：

 2.3.一问一答模式答案

完成后需要回答九个问题方可继续创建

         1.Project name：项目名，默认是输入时的那个名称spa1，直接回车

         2.Project description：项目描述，直接回车

         3.Author：作者，随便填或直接回车

         4.Vue build：选择题，一般选第一个

              4.1Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它了

              4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files

              - render functions are required elsewhere//仅运行时，已经有推荐了就选择第一个了

         5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件

         6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N  新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法

         7.Set up unit tests：是否安装单元测试 N

         8.Setup e2e tests with Nightwatch?：是否安装e2e测试  N

         9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

           > Yes, use NPM                    

             Yes, use Yarn

             No, I will handle that myself     //选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖

        全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成，如下图：

出现如下内容表示项目创建完成，# Project initialization finished!

三、 运行SPA项目

3.1.导入项目

打开我们的HBuilderX➡右击导入➡从本地目录导入➡找到我们的创建SPA项目选择后导入

3.2.运行项目 

①回到我们的cmd命令窗口输入cd 项目名

②输入npm run dev运行

得到spa的访问路径复制到浏览器访问即可

四、基于SPA项目完成路由

首先我们先简单认识一下SPA的项目

大概了解之后就可以开始我们的路由编写。

4.1.案例实操

 ①引入依赖库

  这一步SPA项目已经帮我们做了就直接进行下一步。

  ②定义组件

我们仿造SPA的项目进行定义，在src下的components进行创建。

Home.vue

<template>
  <div>
    这里是网站首页
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

About.vue  

<template>
  <div>
    这里是关于站长
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

  ③定义路由与配置路由路径

找到router下面的index.js进行添加路由与配置路由路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About
  }]
})

  ④定义触发路由的按钮

找到Aue.js定义路由触发的按钮，并修改logo

<template>
  <div id="app">
    <img src="./assets/CSDN头像.jpg" style="width: 300px;height: 300px;"><br>
    <router-link to="/Home">首页</router-link>
     <router-link to="/About">关于</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.2.效果展示  

依旧很丝滑！！！ 

五、基于SPA项目完成嵌套路由

大家有没有见过一种场景，进入到另一个页面，它的下面还有子页面需要再进行点击方可显示，下面我就给大家展示一下是怎么完成的。

我就根据我已有的关于页面进行拓展达到以下效果。

在关于页面进行拓展肯定要去到About.vue进行嵌套路由编写。

5.1.案例实操

①定义组件

先在我们的About.vue写好触发的按钮

<template>
  <div>
  <!--  这里是关于站长 -->
  <router-link to="/AboutMe">关于我</router-link>
  <router-link to="/AboutWebsite">关于网站</router-link>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

AboutMe.vue

<template>
  <div>
   这里是关于网站的发展
   <img src="./assets/logo.png" style="width: 300px;height: 300px;"><br>
  </div>
</template>

<script>
export default {
  name: 'AboutMe',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

AboutWebsite.vue

<template>
  <div>
   这里是关于站长的一些机密不可查看哦！！
   <img src="./assets/1.jpg" style="width: 300px;height: 300px;"><br>
  </div>
</template>

<script>
export default {
  name: 'AboutWebsite',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

  ②定义路由与配置路由路径

找到router下面的index.js进行添加路由与配置路由路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebsite from '@/components/AboutWebsite'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About,
    children: [{
      path: '/AboutMe',
      name: 'AboutMe',
      component: AboutMe
    }, {
      path: '/AboutWebsite',
      name: 'AboutWebsite',
      component: AboutWebsite
    }]
  }]
})

最后由于我们是嵌套路由的关系所以要将子路由挂到About.vue在About.vue添加下列代码即可。

 <router-view></router-view>

5.2.效果展示

也是成功运行！！！ 

请添加图片描述

到这里我的分享就结束了，欢迎到评论区探讨交流！！

💖如果觉得有用的话还请点个赞吧 💖

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1037307.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vtk- 数据类型（一） 三角链实例代码

vtk- 数据类型（一） 三角链实例代码

三角链实例代码 #include <iostream> #include <string> #include <regex> #include "tuex.h" #include "vtkCylinderSource.h" #include "vtkPolyDataMapper.h" #include "vtkActor.h" #include "vtkRendere…
阅读更多...
Java --- MySQL8数据库优化性能查看工具

Java --- MySQL8数据库优化性能查看工具

目录 一、数据库服务器优化步骤 ​编辑二、查看系统性能的参数 三、统计SQL的查询成本&#xff1a;last_query_cost 四、定位执行慢的SQL&#xff1a;慢日志查询 4.1、开启并设置慢查询日志查询参数 4.2、查看慢查询数目 4.3、慢查询日志分析工具&#xff1a;mysqldumps…
阅读更多...
MySQL单表查询和多表查询

MySQL单表查询和多表查询

一、单表查询 素材&#xff1a; 表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作等 CREATE TABLE worker (部门号 int(11) NOT NULL,职工号 int(11) NOT NULL,工作时间 date NOT NULL,工资 float(8,2) NOT NULL,政治面貌 varchar(10)…
阅读更多...
帆软FineReport决策报表之页面布局

帆软FineReport决策报表之页面布局

最近在用帆软决策报表绘制首页大屏&#xff0c;记录使用过程&#xff0c;方便查看。 版本&#xff1a;FineReport10.0 第一步、页面布局 页面布局其实就是组件的排列组合&#xff0c;决策报表主区域body有两种布局方式&#xff1a;自适应布局和绝对布局。 1&#xff09;自适应…
阅读更多...
C#中实现单元测试的示例流程_MSTest测试项目

C#中实现单元测试的示例流程_MSTest测试项目

一、单元测试简介 1.1、单元测试简介 在《单元测试艺术》一书中对于单元测试的定义是&#xff1a;【一个单元测试是一段代码&#xff0c;这段代码调用一个工作单元&#xff08;指&#xff1a;调用软件中的一个方法&#xff0c;这个方法执行过程中所发生的所有行为以及最后产生…
阅读更多...
你好，python！——python基础中的基础

你好，python！——python基础中的基础

〇、注释 0.1 单行注释 python中用 “# ”来给某一行注释&#xff0c; 他的快捷键是 CTRL / &#xff0c;当注释内容已被注释时&#xff0c;会解除注释 0.2 多行注释 python中用 """ 注释内容 """ 来对内容进行多行注释 ""&q…
阅读更多...
DATE和LocalDateTime在Java中有什么区别

DATE和LocalDateTime在Java中有什么区别

在Java中&#xff0c;Date和LocalDateTime是两个表示日期和时间的类&#xff0c;它们有以下区别&#xff1a; 类型&#xff1a;Date是Java旧版提供的日期和时间类&#xff0c;而LocalDateTime是Java 8引入的新日期和时间API中的类。 不可变性&#xff1a;Date是可变类&#x…
阅读更多...
Questasim与Visualizer的livesim仿真

Questasim与Visualizer的livesim仿真

1.前言 Live-Simulation (live-sim)模式允许Visualizer调试环境与Questasim进行交互操作&#xff0c;此模式将Visualizer GUI与Questasim仿真相结合&#xff0c;因此可以在线调试当前仿真的结果和波形。在livesim模式中&#xff0c;可以在Visualizer GUI中控制仿真、设置断点(…
阅读更多...
【Java 基础篇】Java 类加载器详解

【Java 基础篇】Java 类加载器详解

在Java编程中&#xff0c;类加载器&#xff08;Class Loader&#xff09;是一个重要的概念&#xff0c;它负责将类加载到Java虚拟机中&#xff0c;使程序能够正常运行。本文将详细解释Java类加载器的工作原理、不同类型的类加载器以及如何自定义类加载器。 什么是类加载器&…
阅读更多...
智慧公厕以数字技术为中心，融合数字管理技术与城市治理需求精准对接

智慧公厕以数字技术为中心，融合数字管理技术与城市治理需求精准对接

现代城市的发展离不开科技的进步&#xff0c;智慧公厕作为城市治理的重要方面之一&#xff0c;正逐渐受到越来越多的重视。智慧公厕以数字技术为中心&#xff0c;融合数字管理技术与城市治理需求精准对接&#xff0c;为城市居民提供更加方便、舒适的公共卫生设施。本文将以智慧…
阅读更多...
2023年7月嵌入式项目开发专题总汇

2023年7月嵌入式项目开发专题总汇

一、前言 当前文章总结了28个基于不同单片机&#xff08;51单片机和STM32&#xff09;设计的软件和硬件项目。这些项目涵盖了计算器、手机、酒精检测仪、环境温度与湿度检测设备、考勤系统、门禁照相机、人体健康检测仪、数码相册、太阳能热水器、数显热水器和智能空调等多个领…
阅读更多...
高性能计算环境下的深度学习异构集群建设与优化实践

高性能计算环境下的深度学习异构集群建设与优化实践

★深度学习&#xff1b;模式识别&#xff1b;图像处理&#xff1b;人工智能建模&#xff1b;人工智能&#xff1b;深度学习算法&#xff1b;强化学习&#xff1b;神经网络&#xff1b;卷积神经网络&#xff1b;人工神经网络&#xff1b;VIBE算法&#xff1b;控制系统仿真&#…
阅读更多...
用Redis做数据排名

用Redis做数据排名

1.背景 用Redis做数据缓存用的比较多&#xff0c;大家都能熟练使用String和Hash结构去存储数据&#xff0c;今天讲下如何使用ZSet来做数据排名。 假设场景是需要按天存储全国城市的得分数据&#xff0c;可以查询前十名的城市排名。 这个case可以使用传统关系型数据库做…
阅读更多...
5-2 Pytorch中的模型层layers

5-2 Pytorch中的模型层layers

深度学习模型一般由各种模型层组合而成。 torch.nn中内置了非常丰富的各种模型层。它们都属于nn.Module的子类&#xff0c;具备参数管理功能。 例如&#xff1a; nn.Linear, nn.Flatten, nn.Dropout, nn.BatchNorm2d, nn.Embedding nn.Conv2d,nn.AvgPool2d,nn.Conv1d,nn.ConvTr…
阅读更多...
2023华为杯数学建模D题第三问-碳排放路径优化（能源消费结构调整的多目标优化模型构建详细过程+模型假设（可复制））

2023华为杯数学建模D题第三问-碳排放路径优化（能源消费结构调整的多目标优化模型构建详细过程+模型假设（可复制））

1.碳排放约束下&#xff08;人为干预按时碳达峰与碳中和的基准情景&#xff09;能源消费结构多目标优化模型构建 1.1基本假设 本文的模型设计主要基于以下几个基本假设&#xff1a; &#xff08;1&#xff09;能源消费结构调整的根本驱动要素&#xff0c;是对投资耗费的最小化…
阅读更多...
uni-app图片保存到手机

uni-app图片保存到手机

uni.saveImageToPhotosAlbum(OBJECT) 官网地址uni.chooseImage(OBJECT) | uni-app官网 注意filePath不能是网络图片路径&#xff0c;如果我们是网络图片路径需要先下载文件资源到本地&#xff0c;然后再保存到相册 // 保存图片到手机 const saveImg () > {//wx.downloadF…
阅读更多...
《计算机视觉中的多视图几何》笔记（10）

《计算机视觉中的多视图几何》笔记（10）

10 3D Reconstruction of Cameras and Structure 本章主要描述了如何利用2张图片来恢复相机的参数以及物体在三维空间中的形状。 文章目录 10 3D Reconstruction of Cameras and Structure10.1 Outline of reconstruction method10.2 Reconstruction ambiguity10.3 The proje…
阅读更多...
【 Ubuntu】systemd服务创建、启用、状态查询、自启等

【 Ubuntu】systemd服务创建、启用、状态查询、自启等

要在 Ubuntu 启动后执行一个守护脚本&#xff0c;您可以使用 Shell 脚本编写一个 systemd 服务单元。systemd 是 Ubuntu 中常用的服务管理工具&#xff0c;可以在系统启动时自动启动和管理服务。 下面是一个示例的守护脚本和 systemd 服务单元的步骤&#xff1a; 创建守护脚本…
阅读更多...
机器学习第十课--提升树

机器学习第十课--提升树

一.Bagging与Boosting的区别 在上一章里我们学习了一个集成模型叫作随机森林&#xff0c;而且也了解到随机森林属于Bagging的成员。本节我们重点来学习一下另外一种集成模型叫作Boosting。首先回顾一下什么叫Bagging? 比如在随机森林里&#xff0c;针对于样本数据&#xff0c;…
阅读更多...
实在智能入选中国信通院最新《高质量数字化转型产品及服务全景图》，领跑AI大模型核心领域

实在智能入选中国信通院最新《高质量数字化转型产品及服务全景图》，领跑AI大模型核心领域

随着中国数字经济进入快速发展期&#xff0c;中国信通院于2021年正式发起“铸基计划-高质量数字化转型行动”&#xff0c;围绕企业数字化转型供需两侧引导行业数字化建设。近期&#xff0c;中国信通院发布了最新的2023《高质量数字化转型产品及服务全景图&#xff08;8月份新增…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023