使用vue-cli搭建SPA项目

柚子子@

已于 2022-05-10 11:16:03 修改

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript webpack

于 2022-05-04 16:21:38 首次发布

本文链接：https://blog.csdn.net/m0_67476502/article/details/124569880

本文介绍了如何利用vue-cli 2.x版本搭建Vue.js项目，包括安装、创建SPA项目、启动与访问项目，并详细讲解了如何更改调试端口。同时，文章还涵盖了路由嵌套的实现，通过示例展示了如何配置路由以实现首页-用户中心-用户的路由结构。在项目开发中，还提到了添加element-ui组件库的方法。

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

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

综合案例

1. 什么是vue-cli?

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板

2. 安装vue-cli
npm install -g vue-cli

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

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

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

1，cmd #打开命令窗口
2，d: #切换到d盘
3，cd D:\Y1\Workspace-Y1\SSM\vueproject #项目存放的地址
4，vue init webpack spa1

#此命令用于创建SPA项目，它会在当前目录生成一个以“spa1”命名的文件夹
#spa1即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式

步骤三：启动并访问项目
## 此步骤可理解成：启动tomcat，并通过浏览器访问项目
1,cd spa1
2,npm run dev

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

注2：vue-cli构建的项目，在控制台npm run dev启动后，默认的调试地址是8080端口的但是大部分时候，我们都要并行几个项目开发，很有可能已经占用了8080端口，所以就涉及到如何去更改调试地址的端口号了
config --> index.js

配置运行终端

工具 -> 设置 -> 运行配置

运行项目

步骤四：停止项目添加element-ui模块

按两次ctrl+c

npm install element-ui -S #-S就是-save的缩写

@和.的区别？
@代表src根路径下
.代表当前路径

综合案例

首页-用户中心-用户
路由嵌套

 {
        path: '/UserCenter',
        name: 'UserCenter',
        component: UserCenter,
        children: [{
            path: 'UserInfo',
            name: 'UserInfo',
            component: UserInfo,
        }]
    }

1，在components中创建两个vue文件

2，配置路由，进行路由嵌套 3，在弹出页面进行配置路由的嵌套