Vue之vue-cli搭建SPA项目

目录

​编辑

前言

 一、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.mzph.cn/news/87453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust 学习笔记

Rust 学习笔记 Hello world 代码一 fn main() { // 在这里编写你的 Rust 代码 println!("Hello world!"); } 什么是Rust 语言&#xff1f; Rust是一门系统编写语言 &#xff0c;专注于安全 &#xff0c;尤其是并发安全&#xff0c;支持函数式和命令式等编程…

基于规则架构-架构案例2019(三十九)

电子商务 某电子商务公司为了更好地管理用户&#xff0c;提升企业销售业绩&#xff0c;拟开发一套用户管理系统。该系统的基本功能是根据用户的消费级别、消费历史、信用情况等指标将用户划分为不同的等级&#xff0c;并针对不同等级的用户提供相应的折扣方案。在需求分析与架…

计算机网络相关知识点(二)

TCP如何保证传输过程的可靠性&#xff1f; 校验和&#xff1a;发送方在发送数据之前计算校验和&#xff0c;接收方收到数据之后同样需要计算&#xff0c;如果不一致&#xff0c;那么代表传输有问题。 确认应答序&#xff0c;序列号&#xff1a;TCP进行传输时数据都进行了编号…

Vue2+ElementUI 静态首页案例

源码 <template><div class"app-container home"><el-row type"flex" justify"space-around" class"row-bg"><el-card class"box-card cardDiv1"><el-col :span"5"><div clas…

【设计模式】四、工厂模式

文章目录 概述工厂模式简单工厂模式&#xff1a;工厂方法模式抽象工厂模式小结 概述工厂模式 传统方式&#xff1a; 简单工厂模式&#xff1a; 简单工厂模式的设计方案: 定义一个可以实例化 Pizaa 对象的类&#xff0c;封装创建对象的代码。 存在的问题&#xff1a; 简单工厂…

肠道微生物可改善围手术期和术后康复效果

谷禾健康 手术&#xff0c;俗称开刀&#xff0c;是医生通过医疗器械对病人身体局部进行去除病变组织、修复损伤等治疗&#xff0c;来维持患者的健康&#xff0c;在治愈疾病方面具有明确的作用。 围手术期是指从手术决策到手术结束及术后恢复期的整个时间段。围手术期管理的目标…

unable to access xxxx: Failed to connect to xxxx

问题&#xff1a; 1、GitLab仓库加上双重验证后&#xff0c;设置GIt得 Manage Remotes时报错 unable to access xxxx: Failed to connect to xxxx SSL certificate problem:self signed certificate 解决 1、返回前面得操作步骤检查了一遍 没有问题 2、最后尝试一些方法解…

Level FHE 的高效实现 兼容 Level FHE 的高级算法

参考文献&#xff1a; [CS05] Choi Y, Swartzlander E E. Parallel prefix adder design with matrix representation[C]//17th IEEE Symposium on Computer Arithmetic (ARITH’05). IEEE, 2005: 90-98.[SV11] Smart N P, Vercauteren F. Fully homomorphic SIMD operations[…

vue点击pdf文件直接在浏览器中预览文件

好久没有更新文章了&#xff0c;说说为什么会有这篇文章呢&#xff0c;其实是应某个热线评论的要求出的&#xff0c;不过由于最近很长一段时间没打开csdn现在才看到&#xff0c;所以才会导致到现在才出。 先来看看封装完这个预览方法的使用&#xff0c;主打一个方便使用&#x…

结合Mockjs与Bus事件总线搭建首页导航和左侧菜单

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《ELement》。&#x1f3af;&#x1f3af; &#x1…

Python:pyts库中的GramianAngularField

您想要使用pyts库中的GramianAngularField类&#xff0c;这是一个用于时间序列数据图像转换的工具。要使用这个类&#xff0c;首先确保您已经安装了pyts库。如果尚未安装&#xff0c;您可以使用以下命令来安装它&#xff1a; pip install pyts一旦安装完成&#xff0c;您可以通…

如何使用ArcGIS Pro将等高线转DEM

通常情况下&#xff0c;我们拿到的等高线数据一般都是CAD格式&#xff0c;如果要制作三维地形模型&#xff0c;使用栅格格式的DEM数据是更好的选择&#xff0c;这里就为大家介绍一下如何使用ArcGIS Pro将等高线转DEM&#xff0c;希望能对你有所帮助。 创建TIN 在工具箱中选择“…

C/C++大写字母的判断 2023年5月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C大写字母的判断 一、题目要求 1、编程实现 2、输入输出 二、解题思路 1、案例分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 C/C大写字母的判断 2023年5月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 输入一个字符&#xff0c;判…

数组01-二分查找算法

目录 数组如何实现随机访问 两个关键词 数组的特点 根据下标随机访问数组元素 为什么数组要从0开始编号&#xff0c;而不是从1开始 LeetCode之路——704. 二分查找 Code 二分查找算法 数组如何实现随机访问 数组&#xff08;Array&#xff09;是一种线性表数据结构。它…

【计算机网络】IP协议(上)

文章目录 TCP与 IP之间的关系IP地址的认识协议报头格式1. 报头和有效载荷如何分离&#xff1f;2. 8位协议3. 4位版本4. 8位服务类型5. 16位总长度6. 8位生存时间 TTL 网段划分IP地址的划分 子网划分CIDR的提出如何理解CIDR TCP与 IP之间的关系 如&#xff1a;假设 你上高中时&…

OpenCV项目开发实战--主成分分析(PCA)的特征脸应用(附C++/Python实现源码)

什么是主成分分析? 这是理解这篇文章的先决条件。 图 1:使用蓝线和绿线显示 2D 数据的主要组成部分(红点)。 快速回顾一下,我们了解到第一个主成分是数据中最大方差的方向。第二主成分是空间中与第一主成分垂直(正交)的最大方差方向,依此类推。第一和第二主成分红点(2…

Crypto:一眼就解密

题目 根据题目给出的信息可知&#xff0c;flag的为base64编码&#xff0c;数字后面的可以知道为base64编码&#xff0c;解码可得

数据结构上机1

1、题目&#xff1a; 将1~10存入数组a[10]&#xff0c;并将其逆序输出 #define _CRT_SECURE_NO_WARNINGS 1 //(1) 将1~10存入数组a[10]&#xff0c;并将其逆序输出#include <stdio.h>int main() {int a[10];// 将1到10存入数组a[10]for (int i 0; i < 10; i){a[i] i…

蓝桥杯打卡Day15天

文章目录 买不到的数目错误票据 一、买不到的数目OJ链接 本题思路:引理&#xff1a;给定a&#xff0c;b&#xff0c;若dgcd(a,b)>1 ,则一定不能凑出最大数。结论&#xff1a;如果 a,b均是正整数且互质&#xff0c;那么由 axby,x≥0,y≥0 不能凑出的最大数是 ab−a−b。 证…

从技术创新到应用实践,百度智能云发起大模型平台应用开发挑战赛!

大模型已经成为未来技术发展方向的重大变革&#xff0c;热度之下更需去虚向实&#xff0c;让技术走进产业场景。在这样的背景下&#xff0c;百度智能云于近期发起了“百度智能云千帆大模型平台应用开发挑战赛”。 挖掘大模型落地应用 千帆大模型平台应用开发挑战赛启动 在不久前…