Vue 使用vue-cli构建SPA项目（超详细）

2023-09-21 21:12:57

目录

一、什么是vue-cli

二，构建SPA项目

三、 运行SPA项目

前言：

 在我们搭建SPA项目时候，我们必须去检查我们是否搭建好NodeJS环境

 cmd窗口输入以下指令：去检查
   node -v
   npm -v

一、什么是vue-cli

Vue CLI（Vue Command Line Interface）是一个官方提供的用于快速搭建 Vue.js 项目的脚手架工具。它提供了一套命令行工具，可以帮助开发者创建、配置和管理 Vue.js 项目。

使用 Vue CLI，你可以快速初始化一个基于 Vue.js 的项目结构，自动生成一些默认配置和目录结构。它还集成了许多常用的开发工具和插件，如webpack，Babel，ESLint等，使得开发者可以更方便地进行开发、编译和打包等工作。

Vue CLI 不仅提供了一系列默认模板，还支持自定义配置，使得开发者可以根据自己的需求对项目进行定制化。同时，它还支持插件扩展机制，可以通过插件来添加特定功能或扩展工具链。

二，构建SPA项目

1.1为啥要搭建SPA项目？

  1. 更好的用户体验：SPA 可以在页面加载后，通过异步加载数据和局部更新来提供更流畅的用户体验。用户在导航页面时不需要重新加载整个页面，只需要更新相关的组件或数据。

  2. 更快的页面加载速度：由于SPA只需要加载一次初始页面，之后的页面切换只需要加载数据，因此相比传统的多页应用，可以提供更快的页面加载速度。

  3. 独立性和松耦合：SPA 将前端应用划分为多个模块或组件，使得代码更易于维护和调试。不同模块之间可以独立开发、测试和部署，减少了对整个系统的影响。

  4. 跨平台支持：由于SPA 基本上是使用 HTML、CSS 和 JavaScript 构建的，可以轻松地在多个平台和设备上运行，包括桌面浏览器、移动浏览器和混合移动应用。

  5. 更好的扩展性：由于SPA 的模块化和独立性，可以更容易地添加新的功能、修改现有功能或重构代码，而无需对整个应用做大规模的更改。

1.2spa的访问过程：
        （1）访问index.html

        （2）index.html通过main.js中的vue实例管理#app边界，同时指定App.vue模板

        （3）App.vue中包含了图片以及锚点，而锚点与组件的对应关系存在router/index.js中，所以就指向了一个组件

        （4）最终App.vue中就显示了logo图片以及helloworld.vue的内容

1.3安装vue-cli(脚手架)

cmd窗口执行命令：

npm install -g vue-cli

下载成功。

1.4下载我们的SPA项目

输入指令：其中lya_spa是我们创建项目的名称  ----注意：项目名不能用中文或大写字母

 vue init webpack lya_spa

按照要求去回答相关问题，如果与我选择的不一样，后续可能会出现不必要的问题！！！

这样spa项目就创建好了，运行我们的项目

使用Hbuilderx导入我们插入下载的框架

更改端口号：http://localhost:8888/

在config -->index.js -->module.exports -->dev -->port修改

访问我们初始的页面

导入SPA框架后，我们来解释一下每个包的用处

 build文件夹：       

          这个文件夹主要是进行webpack的一些配置
webpack.base.conf.js：

        webpack基础配置,开发环境,生产环境都依赖
webpack.dev.conf.js ：

          webpack开发环境配置
webpack.prod.conf.js：

       webpack生产环境配置
     build.js                        生产环境构建脚本      
     vue-loader.conf.js              此文件是处理.vue文件的配置文件

   config文件夹
     dev.env.js                      配置开发环境 
     prod.env.js                     配置生产环境 
     index.js                        这个文件进行配置代理服务器，例如：端口号的修改 
       
   node_modules文件夹：

               存放npm install时根据package.json配置生成的npm安装包的文件夹

   src文件夹  ： 源码目录(开发中用得最多的文件夹) 
     assets ：共用的样式、图片 
     components  ： 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
     router ：设置路由
     App.vue ：vue文件入口界面 
     main.js ：对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置  

   static文件夹 ：存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置：对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用 

三、 运行SPA项目

示例：

按照创建路由的7个步骤来：

1、引入路由js依赖：main.js中已经完成

2、定义组件：呈现形式是以.vue文件展示

        template标签中定义组件内容

        通过export default指定组件的名字

3、定义路由与组件之间的对应关系

        router/index.js文件中进行定义

4、获取路由对象：main.js中已经完成

5、挂载Vue实例：main.js中已经完成

6、定义锚点：App.vue 使用 router-view

7、触发事件：App.vue 使用 router-link to

1.第一步SPA项目已经帮我们做了就直接进行下一步

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

2.1Home.vue

<template>
	<div>
		网站首页
				<div id="main">
					<div id="left" class="">
						
					</div>
					<div id="right">
						<h4>姓名：ctb  公司：上海***有限公司</h4>
						<h4>住址：***********</h4>
					</div>
				</div>
				<div id="footer" class=" ">
					<ul>
						<h4>本网页制作人为：李永安 制作日期：2023年9月21日20:51:56</h4>
					</ul>
				</div>
	</div>
</template>

<script>
	export default {
	  name: 'Home',
	  data () {
	    return {
	      msg: '网站首页'
	    }
	  }
	}
</script>

<style>
</style>

2.2About.vue  

<template>
	<div>
		关于本网站
	</div>
</template>

<script>
	export default {
	  name: 'About',
	  data () {
	    return {
	      msg: '关于本网站'
	    }
	  }
	}
</script>

<style>
</style>

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

找到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
		}
  ]
})

4定义触发路由的按钮

在App.vue中

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
		<!-- 触发事件 -->
		<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>

效果展示:

基于SPA项目完成嵌套路由

相同的步骤：

1.第一步SPA项目已经帮我们做了就直接进行下一步

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

 2.1Home.vue

<template>
	<div>
		网站首页
				<div id="main">
					<div id="left" class="">
						
					</div>
					<div id="right">
						<h4>姓名：ctb  公司：上海***有限公司</h4>
						<h4>住址：***********</h4>
					</div>
				</div>
				<div id="footer" class=" ">
					<ul>
						<h4>本网页制作人为：李永安 制作日期：2023年9月21日20:51:56</h4>
					</ul>
				</div>
	</div>
</template>

<script>
	export default {
	  name: 'Home',
	  data () {
	    return {
	      msg: '网站首页'
	    }
	  }
	}
</script>

<style>
</style>

2.2About.vue  

<template>
	<div>
		<!-- 触发事件 -->
		<br />
		<router-link to="/AboutMe">关于站长</router-link>
		<router-link to="/AboutWebsite">关于本站</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: 'About',
		data() {
			return {
				msg: '关于本网站'
			}
		}
	}
</script>

<style>
</style>

2.3AboutWebsite.vue

<template>
  <div>
   网站历史
  </div>
</template>
 
<script>
export default {
  name: 'AboutWebsite',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
 
<style>
</style>

2.4AboutMe

<template>
	<div>
		这里是关于网站的发展
	</div>
</template>

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

<style>
</style>

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

找到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>

效果：

更多推荐

交叉编译错误：小心符号链接

交叉编译在进行到链接环节时出现找不到库文件的错误，如下：一般来说，链接时出现库查找不到则需要将库路径添加到link_directories或者target_link_directories,这里说查找不到libblas.so.3和liblapack.so.3，那么查找这两个库的路径后发现，这个库路径是实实在在的添加到了

Hadoop知识点之Hadoop发展历程

一、Hadoop名字的起源Hadoop这个名字不是一个缩写，它是一个虚构的名字。该项目的创建者，DougCutting如此解释Hadoop：这个名字是我孩子给一头吃饱了的棕黄色大象命名的。我的命名标准就是简短，容易发音和拼写，没有太多的意义，并且不会被用于别处。小孩子是这方面的高手。Googol就是由小孩命名的。二、H

spring-boot---validation，参数校验，分组，嵌套，各种类型

写在前面：参数校验基本上是controller必做的事情，毕竟前端传过来的一切都不可信。但是每次if(StrUtil.isNotNull())啥的有时候多还难写。validation可以简化这一操作。文章目录项目构建问题展示validation使用快速入门注释Valid与Validated区别使用范围分组嵌套验证项目构

基于微信小程序的实验室预约管理系统设计与实现

前言💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗👇🏻精彩专栏推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选

python/C++二分查找库函数（lower_bound() 、upper_bound，bisect_left，bisect_right）

二分查找是一种经典的搜索算法，广泛应用于有序数据集中。它允许在大型数据集中高效地查找目标元素，减少了搜索的时间复杂度。本文将介绍在C++和Python中内置的二分查找函数，让二分查找变得更加容易。c++lower_bound()、upper_bound定义在<algorithm>头文件中,lower_bound和upp

大数据分布式处理框架Hadoop

大数据是什么大数据容量常以TB、PB、甚至EB为单位，远超传统数据库的承载能力，无论入库还是查询都出现性能瓶颈。Hadoop是什么Hadoop是开源的分布式计算技术框架，用于处理大规模数据和实现分布式存储。Hadoop核心组件HDFS（HadoopDistributedFileSystem分布式文件系统）：是Hadoo

学习Nano编辑器：入门指南、安装步骤、基本操作和高级功能

文章目录使用Nano编辑器入门指南引言1.1关于Nano编辑器1.2Nano的起源和特点安装Nano2.1在Debian/Ubuntu系统上安装Nano2.2在CentOS/RHEL系统上安装Nano2.3在其他Linux发行版上安装Nano启动Nano3.1命令行启动Nano3.2打开文件Nano的基本操作4.1光标

如何批量为文件夹命名

如果你想要命名一些这样名字具有规律性的文件夹，当文件的数量增多，一个一个命名是非常耗费时间的。很容易想到，如果使用EXCEL，只需往下拉，就能很轻松的拉出1到5。那么，我们如何利用EXCEL来对文件夹进行快速的批量命名呢？以上图为例子，人名可能是我们已知的，可以从表格直接复制过来。而客户名1到客户名5，我们可以直接使用

大数据Flink（六十四）：Flink运行时架构介绍

文章目录Flink运行时架构介绍一、系统架构二、​​​​​​​​​​​​​​整体构成三、作业管理器（JobManager）四、任务管理器（TaskManager）Flink运行时架构介绍我们已经对Flink的主要特性和部署提交有了基本的了解，那它的内部又是怎样工作的，集群配置设置的一些参数又到底有什么含义呢？接下来我们

基于vue的黑马前端项目小兔鲜

目录项目学习初始化项目建立项目引入elementpluselementPlus主题设置配置axios路由引入静态资源自动导入scss变量Layout页组件结构快速搭建字体图标渲染一级导航渲染吸顶导航交互实现Pinia优化重复请求Home页分类实现banner轮播图新鲜好物实现人气推荐实现懒加载指令实现产品列表实现Goo

正确设置PyTorch训练时使用的GPU资源

背景：最近在使用HuggingFace的transformersapi来进行预训练大模型的微调，机器是8卡的GPU，当我调用trainer.train()之后，发现8个GPU都被使用了，因为这个机器上面还有其他人跑的模型，当我进行训练的时候，GPU的使用率就接近了100%，这样导致其他人的模型响应速度特别的慢，因为他们

热文推荐
  1. 普通卷积、转置卷积详细介绍以及用法

    转置卷积（普通卷积、转置卷积详细介绍以及用法1、普通卷积操作2、转置卷积2.1Pytorch转置卷积实验1、普通卷积操作首先回顾下普通卷积，下图以stride=1，padding=0，kernel_size=3为例，假设输入特征图大小是4x4的（假设输入输出都是单通道），通过卷积后得到的特征图大小为2x2。一般使用卷积

  2. elementui表单的验证问题

    elementui表单的验证问题elementui是基于vue的一个ui框架，用起来还是挺不错的，但是有时候还是会遇到一些摸不着头脑的情况。​我在打开一个新增数据的对话框的时候出现了一个问题，明明是新增，但是一打开就出现了错误提示，这肯定是不对的，用户体验也是极其不好的。到底是什么原因导致的呢？​经过我的检查，发现主要

  3. 【leetcode】 数组二分查找

    【leetcode】数组二分查找1.二分查找二分查找（BinarySearch），也称为折半查找，是一种在有序数组中查找特定元素的高效算法。它的基本思想是不断将待查找区间缩小一半，直到找到目标元素或确定目标元素不在数组中为止。这种查找方法比线性查找效率高，因为它可以快速排除掉大部分不可能包含目标元素的区间，从而减少了比

  4. 字符函数和字符串函数（C语言进阶）

    字符函数和字符串函数一.求字符串长度1.strlen二.长度不受限制的字符串函数介绍1.strcpy2.strcat3.strcmp前言C语言中对字符和字符串的处理很是频繁，但是C语言本身是没有字符串类型的，字符串通常放在常量字符串中或者字符数组中。字符串常量适用于那些对它不做修改的字符串函数一.求字符串长度1.str

  5. FPGA project : DS18B20

    本想着一天发一个实验的，这个ds18b20，耗时两天。代码写了两次，呜呜~由于第二次写代码没画时序图，所以代码和时序图一些参数有些不一致，但问题不大。这里有几件事情值得一提：1：关于状态机的编写，我觉得还是三段式比较好。2：关于生成其他时钟信号，用来做触发边沿。我不喜欢用这种方法（提一个概念“全局时钟网络”）。所以用产

  6. heic图片如何转为jpg格式

    &nbsp;&nbsp;heic图片如何转为jpg格式？现阶段，在技术水平不断完善的基础上，图片质量越来越好了，且图片数量也越来越多。图片内容不断丰富，导致图片格式愈发多样化。为了能够保证图片的有效应用，我们有的时候需要将图片格式进行转换。例如，我们可能会遇到将HEIC格式转换为JPG格式的问题，提高图片的利用率。在进

  7. Hive部署,hive客户端

    1、Hive部署Hive是分布式运行的框架还是单机运行的？Hive是单机工具，只需要部署在一台服务器即可。Hive虽然是单机的，但是它可以提交分布式运行的MapReduce程序运行。1.1、规划我们知道Hive是单机工具后，就需要准备一台服务器供Hive使用即可。同时Hive需要使用元数据服务，即需要提供一个关系型数据

  8. FPGA板卡启动以及LED灯带调试

    环境配置软件：MobaXterm（free版本即可）下载教程参考：MobaXterm（终端工具）下载&安装&使用教程_蜗牛也不慢......的博客-CSDN博客Win32Disklmager下载教程参考：不分类工具：Win32DiskImager安装教程_win32disklmager安装教程_月挽的博客-CSDN博客

  9. 【计算机网络】——传输层

    //图片取自王道，仅做交流学习一、传输层提供的服务物理层、数据链路层、网络层是通信子网。传输层：它属于面向通信部分的最高层，同时也是用户功能的最低层为应用层提供通信服务使用网络层的服务网络层提供主机之间的逻辑通信。1、传输层的功能:1.传输层提供进程和进程之间的逻辑通信(即端到端通信)。网络层提供的主机到主机之间的通信