Vue之vue-cli搭建SPA项目

news2025/3/1 20:24:50

目录

​编辑

前言

 一、vue-cli简介

1. 什么是vue-cli

2. vue-cli的重要性

 3. vue-cli的应用场景

二、Vue-cli搭建SPA项目

1. 构建前提（node.js安装完成）

2. 安装vue-cli

3.  使用脚手架vue-cli(2.X版)来构建项目

4. 分析创建spa项目的八个问题

5. 在开发工具中导入新建的SPA项目

6. 启动并访问项目

三、SPA项目实现路由跳转

1. 创建两个新组件

2. 建立路由的关系

3. 设置触发事件

页面演示效果

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

1. 创建两个新组件

2. 建立路由的关系

3. 设置触发事件

页面演示

前言

        在上一期的博客中我给各位老铁带来了有关Vue之路由及node.js环境搭建，上期的博客就是为本期博客做铺垫。今天我给老铁们带来有关Vue的vue-cli搭建SPA项目，请老铁们自习阅读观看哦。

 一、vue-cli简介

1. 什么是vue-cli

        Vue CLI 是一个基于 Vue.js 的脚手架工具，用于快速搭建和开发 Vue.js 项目。脚手架是一组预设的开发环境和代码结构，方便开发者快速开始新项目，并提供了一系列的命令和配置选项来帮助开发者进行项目构建、开发和部署等工作。Vue CLI 提供了一种简单且标准化的方式来创建、管理和维护 Vue.js 项目，使得开发者能够更专注于业务逻辑的实现而不用过多关心项目的设置和构建过程。

2. vue-cli的重要性

        Vue CLI 的作用是为 Vue.js 项目提供脚手架工具，以简化项目的搭建和开发过程。它的重要性体现在以下几个方面：

  1. 快速搭建项目：Vue CLI 提供了一套标准化的项目结构和配置选项，使得开发者能够快速创建一个基于 Vue.js 的项目，并自动集成了常用的构建工具、开发服务器等。

  2. 插件扩展能力：Vue CLI 具有丰富的插件系统，可以根据需求安装和配置各种插件，如路由、状态管理、代码风格检查等。这些插件能够进一步增强项目的功能和开发体验。

  3. 集成开发服务器：Vue CLI 可以快速启动一个开发服务器，实时监听文件变化并自动刷新页面，方便开发者进行实时预览和调试。

  4. 优化生产打包：Vue CLI 提供了一系列的优化工具和配置选项，可以帮助开发者对项目进行打包优化，包括代码压缩、静态资源合并、懒加载等，以提升项目的性能和加载速度。

 3. vue-cli的应用场景

Vue-cli的应用场景
应用场景说明
单页面应用（SPA）开发Vue CLI 提供了快速搭建单页面应用的能力，可以轻松创建一个具有路由、状态管理和组件化架构的 SPA 项目。
多页面应用（MPA）开发虽然 Vue 主要用于构建单页面应用，但 Vue CLI 也能够支持多页面应用的开发。开发者可以通过配置多个入口文件来创建多个独立的页面。
组件库开发Vue CLI 提供了一些命令和工具，方便开发者创建和打包可复用的组件库。开发者可以使用 Vue CLI 创建一个组件库项目，并通过配置进行构建和发布。
原型开发Vue CLI 具备快速搭建原型的能力，可以帮助开发者快速验证想法、设计界面，并与后端进行数据交互。
移动端开发Vue CLI 配合 Vue Native 或 Weex 等框架，可以用于开发移动端的混合应用或原生应用。

二、Vue-cli搭建SPA项目

1. 构建前提（node.js安装完成）

在cmd终端窗口中输入node -v/npm -v指令分别查看node和npm的版本信息

        只有在node.js安装成的情况下才能进行安装vue-cli。

2. 安装vue-cli

随便在那个cmd终端窗口输入一下命令执行，没有先后顺序

npm install -g vue-cli

npm install webpack -g

指令命令之后，会在目录下生成一个文件。vue-cli文件

3.  使用脚手架vue-cli(2.X版)来构建项目

在终端命令窗口中输入 vue init webpack spa指令其中spa指的是项目名，运行即可。

回答后续八个问题会自行创建项目

 如下图就说明项目创建成功了

在指定的路径下我们可以找到我们创建好的SPA项目

4. 分析创建spa项目的八个问题

创建spa项目时的八个问采用“一问一答的模式”

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

5. 在开发工具中导入新建的SPA项目

在HBuilder X中右击左侧的项目栏，选择导入，选择从本地路径导入，找到创建好的SPA项目

文件下的各文件用处：

build：构建SPA项目下的发布包用的。（项目开发涉及不多）

config>index.js:开发环境配置文件。

config>prod.env.js:生产环境配置文件。

node_modules：SPA项目中所需到的所有js文件。（后续有需要加的和maven类似一样添加）

src>assets:放置项目静态资源。

src>components:放置.vue文件（通常是通用组件）

后续还需在src的文件下新创建一个view文件夹用于存储业务相关的组件。

src>router:存放定义路由与组件的对应关系的文件。

SPA项目的工作原理

 

6. 启动并访问项目

在指定目录下的cmd窗口中输入 "cd 项目名"的指令访问项目；"npm run dev"指令启动项目，然后就可以编写了

 项目启动之后会给我们一个首页路径——http://localhost:8080，在浏览器上访问该路径（如下图所示）

 

三、SPA项目实现路由跳转

1. 创建两个新组件

在components文件夹下创建两个.vue文件作为两个组件。

Home.vue

<template>
  <div class="Home">这是网站首页，宣传内容放在这样</div>
</template>

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

<style>
</style>

 About.vue

<template>
  <div class="About">这是站长简介</div>
</template>

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

<style>
</style>

2. 建立路由的关系

在src文件下的router文件下的index.js文件中配置路由关系。

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: '/',
      name: 'Home',
      component: Home
    },{
      path: '/',
      name: 'About',
      component: About
    }
  ]
})

运行http://localhost:8080/效果

 

3. 设置触发事件

在App.vue中设置触发事件

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. 创建两个新组件

在components文件夹下创建两个.vue文件作为两个组件。

AboutMe

<template>
  <div class="AboutMe">
    这是站长简介

    </div>
</template>

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

<style>
</style>

AboutWebsite

<template>
  <div class="AboutWebsite">
    这是网站简介详情
    </div>
</template>

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

<style>
</style>

2. 建立路由的关系

在src文件下的router文件下的index.js文件中配置路由关系。

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

  ]
})

3. 设置触发事件

在About.vue中设置触发事件

About.vue

<template>
  <div class="About">
    <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>

页面演示

         本期博客项就到这了，本期与老铁分享了vue-cli搭建PSA项目的步骤以及用SPA项目实现路由跳转及嵌套路由跳转。希望老铁三连加关注支持一波。

 

 

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

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

相关文章

康耐视Visionpro-单ToolBlock工具规范与脚本测量规范案例分享

康耐视Visionpro-单ToolBlock工具规范与脚本测量规范案例分享

目录 项目要求：测试红框内的宽度显示效果第一步：建立变量第二步：建立命名空间第三步：初始化和关联工具第四步：业务逻辑和标签建立第五步：图层添加标签全部代码项目要求：测试红框内的宽度 显示效果 使用工具输入输出变量解析： 变量分析：变量Select1强制此ToolBLock输出…
阅读更多...
2022年贵州省职业院校技能大赛中职组网络安全赛项规程

2022年贵州省职业院校技能大赛中职组网络安全赛项规程

2022年贵州省职业院校技能大赛中职组 网络安全赛项规程 一、赛项名称 赛项名称&#xff1a;网络安全 赛项归属&#xff1a; 信息技术类 二、竞赛目的 为检验中职学校网络信息安全人才培养成效&#xff0c;促进网络信息安全专业教学改革&#xff0c;培养大批既满足国家网络…
阅读更多...
Ubuntu上通过源码方式安装Redis

Ubuntu上通过源码方式安装Redis

上一篇文章Ubuntu上安装、使用Redis的详细教程已经介绍了再Ubuntu操作系统上安装Redis的详细过程&#xff0c;但是因为安装的Redis只有最主要的配置文件和redis-server&#xff0c;为了更深入地学习Redis和进行更复杂的操作&#xff0c;需要安装一个完整的Redis服务。 这篇文章…
阅读更多...
【Windows Server 2012 R2搭建FTP站点】

【Windows Server 2012 R2搭建FTP站点】

打开服务器管理器——添加角色和功能 下一步 下一步 下一步 选择FTP服务器&#xff0c;勾上FTP服务和FTP扩展&#xff0c;点击下一步 安装 安装完成关闭 打开我们的IIS服务器 在WIN-XXX主页可以看到我们的FTP相关菜单 右键WIN-XXXX主页&#xff0c;添加FTP站点 输入站点名称-FT…
阅读更多...
Redis实现Session持久化

Redis实现Session持久化

Redis实现Session持久化 1. 前言 直接使用Session存储用户登录信息&#xff0c;此时的会话信息是存储在内中的&#xff0c;只要项目重启存储的Session信息就会丢失。而使用Redis存储Session的话就不会存在这种情况&#xff0c;即使项目重启也并不影响&#xff0c;也无需用户重…
阅读更多...
新款 锐科达 SV-2102VP SIP广播音频模块 RTP流音频广播

新款 锐科达 SV-2102VP SIP广播音频模块 RTP流音频广播

新款 锐科达 SV-2102VP SIP广播音频模块 RTP流音频广播 SV-2102VP和 SV-2103VP网络音频模块是一款通用的独立SIP音频功能模块&#xff0c;可以轻松地嵌入到OEM产品中。该模块对来自网络的SIP协议及RTP音频流进行编解码。 本系列模块可以应用于以下领域&#xff1a; • 各种商…
阅读更多...
在Vue中实现组件间的通信（父子通信，非父子通信，通用通信）

在Vue中实现组件间的通信（父子通信，非父子通信，通用通信）

在vue中实现组件间的通信 文章目录 在vue中实现组件间的通信1、组件通信1.1、不同的组件关系和组件通信方案分类1.2、组件通信的解决方案1.3、非父子通信- event bus事件总线 2、prop2.1、prop详解2.2、prop校验2.3、prop & data、单向数据流 3、v-mdoel原理 1、组件通信 …
阅读更多...
Fink--3、Flink运行时架构（并行度、算子链、任务槽、作业提交流程）

Fink--3、Flink运行时架构（并行度、算子链、任务槽、作业提交流程）

1、系统架构&#xff08;以Standalone会话模式为例&#xff09; 1、作业管理器&#xff08;JobManager&#xff09; JobManager是一个Flink集群中任务管理和调度的核心&#xff0c;是控制应用执行的主进程。也就是说&#xff0c;每个应用都应该被唯一的JobManager所控制执行。 …
阅读更多...
隧道爬虫IP工作原理及应用场景解析

隧道爬虫IP工作原理及应用场景解析

隧道爬虫IP作为一种网络爬虫IP技术&#xff0c;可在网络通信中实现隐私保护和数据安全传输。本文将深入探讨隧道爬虫IP的工作原理&#xff0c;并介绍其在不同应用场景下的具体应用。无论你是网络爱好者还是技术专业人士&#xff0c;相信这篇文章都能为你带来一些新的见解和启发…
阅读更多...
网络编程套接字 | TCP套接字

网络编程套接字 | TCP套接字

前面的文章中我们使用UDP套接字编写了四个版本&#xff0c;不同的UDP服务器&#xff0c;在本文中我们将要对TCP套接字进行几个不同的版本的代码的编写&#xff0c;首先测试一下TCP套接字的代码&#xff0c;然后是将这个版本进行修改成多进程版本的&#xff0c;再将代码修改成多…
阅读更多...
R语言RSTAN MCMC：NUTS采样算法用LASSO 构建贝叶斯线性回归模型分析职业声望数据...

R语言RSTAN MCMC：NUTS采样算法用LASSO 构建贝叶斯线性回归模型分析职业声望数据...

全文链接&#xff1a;http://tecdat.cn/?p24456 如果你正在进行统计分析&#xff1a;想要加一些先验信息&#xff0c;最终你想要的是预测。所以你决定使用贝叶斯&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 相关视频 但是&#xff0c;你没有共轭先验。你…
阅读更多...
【算法训练-二叉树 五】【最近公共祖先】二叉树的最近公共祖先

【算法训练-二叉树 五】【最近公共祖先】二叉树的最近公共祖先

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【二叉树的节点查找】&#xff0c;使用【二叉树】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条…
阅读更多...
基于微信小程序的高校就业招聘系统设计与实现(源码+lw+部署文档+讲解等)

基于微信小程序的高校就业招聘系统设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…
阅读更多...
悬崖边：企业如何应对网络安全漏洞趋势

悬崖边：企业如何应对网络安全漏洞趋势

在本文中&#xff0c;我们将讨论企业在处理漏洞时面临的挑战&#xff0c;解释安全漏洞是如何引发网络攻击的&#xff0c;以及为什么它会导致不可接受的事件。我们还将分享我们在识别趋势性漏洞方面的经验。 现代信息安全方法正在成为企业的工作流程。例如&#xff0c;不久前&a…
阅读更多...
Visio 无边框保存png和pdf文件

Visio 无边框保存png和pdf文件

1 无边框保存为png 1 点击【开发工具】- 【显示ShapeSheet】- 【页】 选择【Print Properties】 更改【PageLeftMargin、PageRightMargin、PageTopMargin、PageBottomMargin】的数值&#xff0c;如果改成0&#xff0c;那么就完全没有空白。更改数值后一定要回车&#xff01; …
阅读更多...
Uni-app 调用微信地图导航功能【有图】

Uni-app 调用微信地图导航功能【有图】

前言 我们在使用uni-app时&#xff0c;有时候会遇到需要开发地图和导航的功能&#xff0c;这些方法其实微信小程序的API已经帮我们封装好了 详见&#xff1a;微信小程序开发文档 接下来我们就演示如何用uni-app来使用他们 使用 <template><view><button type…
阅读更多...
什么是Vue的自定义指令（custom directives）？如何自定义指令？

什么是Vue的自定义指令（custom directives）？如何自定义指令？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Vue.js 的自定义指令⭐ 示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友…
阅读更多...
蓝桥杯 题库 简单 每日十题 day7

蓝桥杯 题库 简单 每日十题 day7

01 啤酒和饮料 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。啤酒每罐2.3元&#xff0c;饮料每罐1.9元。小明买了若干啤酒和饮料&#xff0c;一共花了82.3元。我们还知道他买的啤酒比饮料的数量少&#xff0c;请你…
阅读更多...
时间任务管理软件OmniFocus 3 mac中文版软件特色

时间任务管理软件OmniFocus 3 mac中文版软件特色

OmniFocus Standard mac是一款高效的任务管理软件&#xff0c;具有任务管理功能、自定义功能、简洁直观的界面以及强大的提醒和通知功能。 OmniFocus Standard mac软件特色 ​任务管理功能&#xff1a;OmniFocus Standard支持多种视图以适应不同的需求和偏好&#xff0c;比如项…
阅读更多...
vue3【echarts 做的词云图】

vue3【echarts 做的词云图】

效果图 安装 安装echarts npm install echarts安装词云图 npm install echarts-wordcloudecharts-wordcloud的git仓库地址 echarts官网地址 引用 import * as ECharts from "echarts"; //引用eacharts import echarts-wordcloud;//引用云词这里的echarts 是自己简…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023