使用vue-cli搭建SPA项目

目录

使用脚手架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，在弹出页面进行配置路由的嵌套