使用vue-cli搭建SPA项目

一：用vue-cli搭建spa项目

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

2. 安装vue-cli

在cmd中输入下面两行指令

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

注1：保证网络质量良好，不然会出现报错。

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

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

 ## 步骤一：使用脚手架创建项目骨架
 ## 此步骤可理解成：使用eclipse创建一个maven的web项目
      直接在项目存储的文件导航栏中输入cmd；

 输入：

 vue init webpack spa1

 #此命令用于创建SPA项目，它会在当前目录生成一个以“spa1”命名的文件夹

创建时会出现以下问题：

“一问一答”模式
         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 spa1和npm run dev

将会启动项目

 

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

二：在spa项目中运用路由

将项目导入编程软件

 

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

package.json详解
   每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，
   以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，
   自动下载所需的模块，也就是配置项目所需的运行和开发环境
 

 vue项目结构说明：

 结构图:

整体为index.html（根组件）在其中定义了边界<div id=''app></div>,App.vue是index.html其中的子组件通过mian.js中的路由连接两个组件;Hellowrld.vue又为App.vue的子组件同理；

在componrnts中建立组件；

在index.js中建立路由即可

注意：在建立路由是要建立关系

import About from '@/components/About'

三：嵌套路由

案例：

 在点击关于组件时，里面还有两个组件

 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>

建立组件

Home博客内容，About关于，AboutWebSite网站发展历史,AboutMe博主相关事记

 

路由：

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

嵌套路由写法:

 {
      path: '/About',
      name: 'About',
      component: About,
      children:[
        {
          path: '/AboutMe',
          name: 'AboutMe',
          component: AboutMe
        },
        {
          path: '/AboutWebSite',
          name: 'AboutWebSite',
          component: AboutWebSite
        }
      ]
    }

运行：

使用vue-cli搭建SPA项目分享完毕，希望会有所帮助!