使用vue-cli搭建SPA项目

最新推荐文章于 2025-05-16 13:57:57 发布
最新推荐文章于 2025-05-16 13:57:57 发布
阅读量127 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_60375302/article/details/121162371
版权
本文详细介绍了如何使用vue-cli搭建SPA项目，从安装环境到创建项目骨架，再到配置路由和组件开发。同时，讲解了基于SPA的组件开发流程，包括组件分离、路由配置和嵌套路由的实现，最后展示了实际运行效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、通过vue-cli脚手架构建SPA项目

1、前提：搭建好NodeJS环境

2.、什么是vue-cli?

3、安装vue-cli

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

①、使用脚手架创建项目骨架

②、“一问一答”模式

③、安装需要的模块

 ④、启动并访问项目

⑤、 更改调试地址的端口号

 二、基于SPA项目的组件开发流程

1. vue项目结构说明

2、原理

2、将index.html与组件分开

①、删掉图片创建按钮 

②、不引用HelloWorld组件，新建Home.vue和Abort.vue

③、配置路由，修改index.js引用的组件

3、得到结果

三、嵌套路由

1、创建Abort1.vue、Abort2.vue

①、Abort1.vue

 ②、Abort2.vue

2、配置路由

3、定义锚点

4、结果

①、首页

②、关于

③、关于1

④、关于2

一、通过vue-cli脚手架构建SPA项目

使用脚手架的目的：规范前端项目开发的目录结构

1、前提：搭建好NodeJS环境

node -v

npm -v

2.、什么是vue-cli?

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：           
vue init webpack xxx                    

   注1：xxx 为自己创建项目的名称
   注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境


3、安装vue-cli

   npm install -g vue-cli
   npm install -g webpack

 ​

 安装成功后，会出现如下文件

​

安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。 

​

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

①、使用脚手架创建项目骨架

 cmd                                      #打开命令窗口
   d:                                       #切换到d盘
   cd d:\temp                            进入d:\temp目录
   vue init webpack spa1          此命令用于创建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安装依赖

        全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成
        # Project initialization finished!
        # ======================== 

 ​

③、安装需要的模块

cd spa                                 改变路径到spa1文件夹下
   npm install                         安装所有项目需要的npm模块

 ​

 ④、启动并访问项目

 cd spa 
   npm run dev

​

 项目启动成功后，打开浏览器输入“http://localhost:8080”即可

​

⑤、 更改调试地址的端口号

（1）、导入项目

​

​

 （2）、修改

​

 （3）、终止操作

Ctrl+C：终止操作

​

（4）、重新启动

npm run dev：重新启动 

​

​

 二、基于SPA项目的组件开发流程

1. vue项目结构说明

  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文件放在这个文件夹引用    
   package.json       这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies                                和devDependencies中，
                              分别对应全局下载和局部下载的依赖包

2、原理

​

index.html：整Spa唯一的界面，而且开发不需要写任何东西

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>spa</title>
  </head>
  <body>
    <!-- 边界-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 main.js：整个SPA项目唯一的入口（想使用的工具包都在这里面引用），index.html想显示什么都                 由main.js决定

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
/* 绑定了index.html的边界 */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue：引用了图片，锚点

<template>
  <div id="app">
    <!-- 引用了图片-->
    <img src="./assets/logo.png">
    <!-- 锚点显示的内容取决于路由指向的组件-->
    <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>

index.js：HelloWorld的组件最终会显示到App.vue的<router-view/>锚点

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

2、将index.html与组件分开

①、删掉图片创建按钮 

App.vue

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/Abort">关于</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>

②、不引用HelloWorld组件，新建Home.vue和Abort.vue

Home.vue

<template>
  <div>
    首页
  </div>
</template>

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

<style>
</style>

Abort.vue

<template>
  <div>
    关于
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

③、配置路由，修改index.js引用的组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Abort',
      name: 'Abort',
      component: Abort
    }
  ]
})

3、得到结果

①、首页

​

 ②、关于

​

三、嵌套路由

④、关于2
1、创建Abort1.vue、Abort2.vue

①、Abort1.vue

<template>
  <div>
    关于小白
  </div>
</template>

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

<style>
</style>

 ②、Abort2.vue

<template>
  <div>
    关于小黑
  </div>
</template>

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

<style>
</style>

2、配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'
import Abort1 from '@/components/Abort1'
import Abort2 from '@/components/Abort2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Abort',
      name: 'Abort',
      component: Abort,
      children:[
        {
          path: '/Abort1',
          name: 'Abort1',
          component: Abort1
        },{
      path: '/Abort2',
      name: 'Abort2',
      component: Abort2
    }
      ]
    }
  ]
})

3、定义锚点

<template>
  <div>
    <router-link to="/Abort1">关于1</router-link>
    <router-link to="/Abort2">关于2</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

4、结果

①、首页

​

②、关于

​

③、关于1

​

④、关于2

​

使用Vue-cli搭建SPA项目
weixin_56069070的博客
11-06 374
前言：今天要分享的知识是使用Vue-cli搭建SPA项目 码字不易，点个赞 转载请说明！！！ 一、vue-cil脚手架 二、将index.html与组件分开 三、嵌套路由
使用vue-cli来搭建vue项目
qq_44271884的博客
08-08 421
前提：搭建好NodeJS环境 node -v npm -v 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称 注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境 安装vue-cli npm install -g ...
如何使用vue-cli搭建SPA项目
小宝的宝呢的博客
11-05 249
目标： 通过vue-cli脚手架构建SPA项目 将index.html与组件分开 嵌套路由 一，通过vue-cli脚手架构建SPA项目 vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： 在黑窗口执行 npm install -g vue-cli npm install -g webpack 执行成功后会在node_global目录下产生一下文件 ...
vue-cli单页面预渲染seo-prerender-spa-plugin操作
10-14
如果你正在使用 Vue CLI 2.0，可以在项目中通过以下命令安装 `prerender-spa-plugin`： ```bash cnpm i prerender-spa-plugin --save-dev ``` 如果你使用的是 Vue CLI 3.0 或更高版本，可以在项目中通过以下...
使用vue-cli（vue脚手架）快速搭建项目
2401_84435768的博客
04-27 670
1、《亿级流量Java高并发与网络编程实战》2、《分布式一致性算法开发实战 媒体宣传文案》3、《Java多线程与大数据处理实战》4、《深入浅出TCPIP和VPN》 目录一、什么是VueCLI1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。3、CLI是什么意思？4、脚手架长什么样？5、脚手架依赖于node.js和webpack二、安装Vue CLI脚手架三、runtime-compiler和runtime-onl
SPA,vue-cli(vue脚手架)
酷爱前端的小陈博客
04-21 876
1. 什么是单页面应用程序 单页面应用程序（英文名：Single Page Application）简称 SPA，顾名 思义，指的是一个Web 网站中只有唯一的一个HTML 页面，所有的功能 与交互都在这唯一的一个页面内完成。 例如资料中的这个Demo 项目： 2. 什么是 vue-cli vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的 Vue 项目的过程。 引用自 vue-cli 官网上的一句话： 程序员可以专注在撰写应用上，而不必花好几天.
vue脚手架的搭建及对SPA（单页面开发）的理解
NeroSolomon的博客
03-09 3309
本文默认已经安装nodejs1.全局安装vue-cli$ npm install --global vue-cli2. 创建一个基于webpack模板的新项目$ vue init webpack new-project3. 安装依赖$ cd new-project $ npm install4. 运行脚手架$ npm run dev5. 这样就可以得到一个vue应用了. |-- build ...
使用脚手架搭建SPA项目
weixin_55966394的博客
11-07 210
目标： 使用脚手架成功搭建一个vue基本项目 了解项目结构及构成 实现路由嵌套 一、使用脚手架 在使用之前，要确保NodeJs环境搭建好了， 在cmd窗口输入命令查看 node -v npm -v 1. 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称...
基于 vue 全家桶的 spa 项目模板
程序员
01-31 1849
项目简介Github: https://github.com/hanan198501/vue-spa-template最近在给团队做前端技术改造，移动端方面主要使用 vue2.0 重构，这是基于 vue-cli 脚手架生成项目模板。我们做了一些改造，加入了 vue-router ，vuex 等配套设施，本地 dev server 中加入了接口 mock 功能，还增加一个 build server 来
vue spa项目调用微信jssdk，在iOS下报错invalid signature
唐唐唐行的博客
10-20 467
vue：调用微信jssdk，配置config在安卓系统下正常，ios系统报错invalid signature_mosowe-优快云博客框架：vue问题回顾：制作vue单页面，调用微信语音相关功能，配置config在ios端报错'invalid signature'解决办法：在给后端传当前url获取微信config的时候，要去掉路由#后面的内容，所以取url的方法为location.href.split('#')[0]。补充：由于在ios和android中，location.href在spa页面的机制不同
Vue:显示数据
2301_82101106的博客
05-14 294
v-text和v-html。它们都能将数据渲染到页面上，但处理方式有本质区别。通过代码示例理解它们的特性和使用场景。v-text。
VUE篇之自定义组件使用v-model
ae_pppppp的博客
05-15 254
该代码展示了如何在Vue.js中使用子组件和父组件进行双向数据绑定。子组件MyComponent包含一个时间选择器el-time-select，并通过v-model与父组件进行数据同步。子组件通过props接收父组件传递的value，并在内部创建副本innerValue以避免直接修改props。子组件通过watch监听value的变化，并在时间选择器值改变时触发input事件，更新父组件的formData。父组件通过v-model绑定formData，并实时显示当前选择的时间。这种方式实现了父子组件之间的数
Vue3——Watch侦听器
m0_74386799的博客
05-15 420
watch是⼀个⽤于观察和响应Vue响应式系统中数据变化的⽅法。它允许你指定⼀个数据源（可以是 响应式引⽤、计算属性、组件的属性等），当这个数据源的值发⽣变化时，你可以执⾏⼀些响应的副作 ⽤（side effects）。watch可以⽤来监听任何响应式数据的变化。手动指定监听对象。
javascript和vue的不同
最新发布
xiaogaotongxue__的博客
05-16 637
基于 Object.defineProperty ()（Vue 2）或 Proxy（Vue 3）：Vue 自动追踪数据变化并更新 DOM。手动操作 DOM：通过document.querySelector()等方法获取 DOM 元素，然后直接修改其属性或内容。虚拟 DOM（Virtual DOM）：Vue 通过虚拟 DOM diff 算法高效更新真实 DOM，开发者无需手动操作。：数据和 DOM 自动同步，开发者只需关注数据的变化。：数据和 DOM 是分离的，需要手动维护两者的同步。
使用vue-cli搭建Vue+Vue-router+Webpack前端框架
"使用Vue+Vue-Router+Webpack搭建前端框架的文档" 在现代前端开发中，Vue.js是一个非常流行的轻量级渐进式框架，它允许开发者构建可维护且高性能的用户界面。Vue-Router是Vue.js官方的路由管理器，用于处理SPA（单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值