【Vue】如何搭建SPA项目--详细教程

2023-09-21 21:47:51

                                                🎬 艳艳耶✌️：个人主页

                                               🔥 个人专栏 ：《Spring与Mybatis集成整合》《springMvc使用》

                                                ⛺️ 生活的理想，为了不断更新自己 !
 

目录

1.什么是vue-cli

 2.安装

 2.1.创建SPA项目

2.3.一问一答模式答案

 3.运行SPA项目

3.1.导入项目

3.2.运行项目 

4.基于SPA项目完成路由

4.1.案例实操

5.基于SPA项目完成嵌套路由

5.1.案例实操

5.2.效果展示

1.什么是vue-cli

      Vue CLI是一个基于Vue.js的官方脚手架工具，用于快速启动、构建和管理Vue.js项目。它提供了一套交互式的命令行界面，可以帮助开发者快速创建一个新的Vue项目，并集成了常用的开发工具和配置，比如代码打包、开发服务器、热重载等等。使用Vue CLI，开发者可以更加高效地进行Vue.js项目开发，节省了配置的时间和精力。同时，Vue CLI还支持插件系统，可以通过插件扩展功能，满足不同项目的需求。总之，Vue CLI是Vue.js开发的必备工具之一。

 2.安装

 2.1.创建SPA项目

           vue init webpack   项目名  

效果如下图：

创建SPA项目，成功之后会出现9个问题，做出回答即可创建完成

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安装依赖

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

 3.运行SPA项目

3.1.导入项目

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

 

 

3.2.运行项目 

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

  • 输入npm run dev运行

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

4.基于SPA项目完成路由

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

4.1.案例实操

  •  引入依赖库，已经自动生成了

  • 定义组件

仿造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
  }]
})

  • 定义触发路由的按钮

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

<template>
  <div id="app">
    <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>

效果展示：

5.基于SPA项目完成嵌套路由

5.1.案例实操

  • 定义组件

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

<template>
  <div>
  <!--  这里是关于站长 -->
  <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: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

再创建AboutMe.vue

<template>
  <div>
   商品上架
   炸鸡
   薯条
   可乐
  </div>
</template>

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

<style>
</style>

再创建AboutWebsite.vue

<template>
  <div>
   商品价格

  </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
    }]
  }]
})

5.2.效果展示

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

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

 

更多推荐

npm安装心得（依赖库Python及node-sass依赖环境）

在使用vue的开发环境过程中，总会遇到这样哪样的安装或者打包错误，vue运行或打包常见错误如下：1.npminstall时node-sassnpmERRcommandfailed（可能是node.js的版本和node-sass的版本不符，就是卸掉原来的node.js，下载一个符合node-sass版本的node.js）

Go - 【字符串，数组，哈希表】常用操作

一.字符串字符串长度：s:="hello"l:=len(s)fmt.Println(l)//输出5遍历字符串：s:="hello"fori,c:=ranges{fmt.Printf("%d:%c",i,c)}//输出：0:h1:e2:l3:l4:ofori:=0;i<len(s);i++{fmt.Printf("%s"

Go基础-文件、字符

文件创建导入“os”包，创建文件，读写文件的函数都在改包。指定创建的文件存放路径以及文件名。执行Create()函数，进行文件创建。关闭文件。packagemainimport("fmt""os")funcmain(){//创建文件，需要指定文件的存放路径以及文件名称//file为文件指针file,err:=os.Cr

C#控制台程序中使用log4.net来输出日志

Apachelog4net库是一个帮助程序员将日志语句输出到各种输出目标的工具。log4net是优秀的Apachelog4j™框架到Microsoft®.NE​​T运行时的端口。我喜欢他可以自定义输出，区分等级等特点。导入库我们在工程里添加NuGet的包。输入名称log4net，导入包。创建配置文件然后我们在项目根创建

北邮22级信通院数电：Verilog-FPGA（3）实验“跑通第一个例程”modelsim仿真及遇到的问题汇总（持续更新中）

北邮22信通一枚~跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章持续关注作者迎接数电实验学习~获取更多文章，请访问专栏：北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客注意：本篇文章所有绝对路径的展示都来自上一篇博客北邮22级信通院数电：Verilog-FPGA（2）modelsim北邮信通专属下

蓝蓝设计提供气象行业软件设计

北京蓝蓝设计在气象行业软件界面设计方面具有成功的案例和丰富的经验。蓝蓝与多家气象行业软件开发商合作，为其设计了一系列优秀的界面，得到了客户的高度认可和好评。我们的设计作品不仅满足了客户的需求，还提升了软件的品牌形象和竞争力。北京蓝蓝设计还致力于学习和应用最新的设计技术和工具。我们紧跟行业发展的脚步，不断更新自己的设计理

JMeter 设置请求头信息的详细步骤

在使用JMeter的过程中，我们会遇到需要设置请求头信息的场景。比如：POST传过去的Body数据是json格式的。需要填添加头信息：Content-Type：application/json。在header中用token来传用户的认证信息。下面，来具体介绍下JMeter设置HTTP请求头的方法。1添加请求头右击HTT

Jmeter系列-并发线程Concurrency Thread Group的介绍（7）

简介ConcurrencyThreadGroup提供了用于配置多个线程计划的简化方法，该线程组目的是为了保持并发水平，意味着如果并发线程不够，则在运行线程中启动额外的线程ConcurrencyThreadGroup提供了更好的用户行为模拟，因为它使您可以更轻松地控制测试的时间，并创建替换线程以防线程在过程中完成现在安装

Jmeter系列-控制器Controllers的介绍（8）

Controllers简介JMeter是一款功能强大的性能测试工具，而控制器是JMeter中非常重要的一个组件。控制器用于控制测试计划的执行流程，可以根据需求来控制线程的启动、停止、循环等操作。Jmeter有两种类型的控制器：Samplers（取样器）和LogicalControllers（逻辑控制器）；它们驱动着测试

Jmeter —— 常用的几种断言方法（基本用法）

在使用JMeter进行性能测试或者接口自动化测试工作中，经常会用到的一个功能，就是断言，断言相当于检查点，它是用来判断系统返回的响应结果是否正确，以此帮我们判断测试是否通过，本文主要介绍几种常用的断言：响应断言、JSON断言、BeanShell断言一、响应断言1.响应断言是最常用的一种断言方法，它可以对各种返回类型的结

四、数学建模之图与网络模型

1.定义2.例题及软件代码求解一、定义1.图和网络是相关概念（1）图（Graph）：图是数学和计算机科学中的一个抽象概念，它由一组节点（顶点）和连接这些节点的边组成。图可以是有向的（有方向的，边有箭头表示方向）或无向的（没有方向的，边没有箭头表示方向）。图用于表示各种关系，如社交网络、电路、地图、组织结构等。（2）网络

热文推荐
  1. Python灰帽子编程————网页信息爬取

    爬取图片，问题分解：获取网页内容；从网页内容中提取图片地址；通过图片地址，将图片下载到本地。1.相关模块1.1requests模块获取网页内容。requests模块：主要是用来模拟浏览器行为，发送HTTP请求，并处理HTTP响应的功能。importrequests#被认为，最贴近与人的操作的模块importurllib

  2. 【C++】C++ 引用详解 ⑥ ( 普通变量 / 一级指针 / 二级指针 做函数参数的作用 )

    文章目录一、普通变量/一级指针/二级指针做函数参数的作用1、普通变量做函数参数的作用2、一级指针做函数参数的作用3、二级指针做函数参数的作用4、代码示例-二级指针做函数参数的作用一、普通变量/一级指针/二级指针做函数参数的作用1、普通变量做函数参数的作用普通变量的作用:将普通变量传入函数作为参数,则可以在函数中,访问到

  3. 【Java 基础篇】Java 运算符宝典：Java编程的关键

    在Java编程中，运算符是用于执行各种操作的特殊符号。它们可以用于操作各种数据类型，执行算术、逻辑和比较等操作。本篇博客将详细介绍Java中常见的运算符，以及它们的使用和示例。算术运算符算术运算符用于执行基本的数学运算，如加法、减法、乘法和除法。加法运算符（+）加法运算符用于将两个值相加，并返回它们的和。示例：inta

  4. MySQL主从复制与读写分离

    目录MySQL主从复制1、mysql支持的复制类型2、主从复制的工作过程3、主从复制操作1）下载时间同步工具，并配置时间源，实现slave库与master库时间同步2）、配置主master库3）配置slave库4）登录主MySQL，给从服务器授权5）登录从数据库，配置同步，并启动同步6）测试MySQL读写分离MySQL

  5. HTTPS的传输过程

    加密分为两种方式一种是对称加密，一种是非对称加密。在对称加密算法中，加密和解密使用的密钥是相同的。也就是说，加密和解密使用的是同一个密钥。因此，对称加密算法要保证安全性的话，密钥要做好保密。只能让使用的人知道，不能对外公开。在非对称加密算法中，加密使用的密钥和解密使用的密钥是不相同的。一把是作为公开的公钥，另一把是作为

  6. 机器学习西瓜书+南瓜书吃瓜教程学习笔记第四章决策树

    1、算法原理从逻辑角度，一堆ifelse语句的组合从集合角度，根据某种准则划分特征空间最终目的：将样本越分越“纯”决策树是基于树结构来进行决策的例如，我们对“这是好瓜吗？”这样的问题进行决策时，通常会进行一系列的判断或“子决策”：我们先看“它是什么颜色？”，如果是“青绿色”，则我们再看“它的根蒂是什么形态？”，如果是“

  7. Linux C 网络基础

    为什么需要网络通信？进程间通信解决的是本机内通信网络通信解决的是任意不同机器的通信实现网络通信需要哪些支持1.通信设备：网卡（PC机自带）；路由器和交换机；光纤、电缆和基站2.通信协议：2.1.操作系统自带协议栈（Linux的特点：丰富的网络协议）2.2.裸机开发需要独立的协议栈3.简单网络通信只需要学会系统APITC

  8. Java基础（三）

    前言：前面主要涉及到java的基本语法，接下来本篇博客主要记录Java中Collections类、泛型、以及File类、IO流的学习。目录数据结构泛型集合分类Collection的分类collection常用方法collection遍历方式迭代器for循环Lambda表达式List集合特点增删改查List集合的遍历方式

  9. 爬虫 — Scrapy 框架（一）

    目录一、介绍1、同步与异步2、阻塞与非阻塞二、工作流程三、项目结构1、安装2、项目文件夹2.1、方式一2.2、方式二3、创建项目4、项目文件组成4.1、piders/__init__.py4.2、spiders/demo.py4.3、__init__.py4.4、items.py4.5、middlewares.py4.