使用脚手架搭建SPA项目

目标：

使用脚手架成功搭建一个vue基本项目

了解项目结构及构成

实现路由嵌套

 一、使用脚手架

在使用之前，要确保NodeJs环境搭建好了，

在cmd窗口输入命令查看

node -v

npm -v

1. 什么是vue-cli?

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

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

2. 安装vue-cli 

npm install -g vue-cli

npm install -g webpack

注1：安装成功后，会出现如下文件
        D:\initPath
             node-v10.15.3-win-x64
               node_global
                 vue
                 vue.cmd 
                 vue-init
                 vue-init.cmd
                 vue-list
                 vue-list.cmd

安装成功后命令窗口输入vue -V,输出成功则安装成功

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

使用脚手架搭建项目骨架，类似java中创建maven项目。

a.先将指针跳转至你指定的文件夹，这里我用的E:\temp

b.在目录下运行创建代码

vue init webpack spa1

c.运行完上面后会有一系列问题，完善你项目的基本信息。

         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!
        # ======================== 

 

 

 。。。。。

 因为云行过程太长了，并且中间都是自动操作，所以省略

这个步骤之后使用他提供的代码就可以运行项目了也就是黄色那两行。

运行启动代码之后：

会有一个默认的界面，长这个样：

 

 可以使用编程工具打开文件夹，查看他的结构。

二、vue基础项目结构及端口号修改

1.项目结构解析

这是我们刚刚建好的项目结构图，src是我们主要使用的编程目录，config是类似于配置文件的目录。

src是主要开发目录，assets是放静态资源的目录，logo,就是上面首页的图片，compenents是放组件的目录，router是路由器存放

项目的唯一界面是index.html，开发时不需要写代码在这里

通main.js项目的唯一入口，决定页面引入的工具包等

index.js中定义的是路由集合，我们新写的组件也是在这里配置

App.vue定义了锚点

2.端口号修改（package.json详解）

端口号默认8080，所以会与后台tomcat服务产生冲突，所以更改端口号是必须的。

前面讲到，关于项目配置之类的东西，是放在package.json中的，来看一下结构

{
	"name": "spa1", //项目名称:1.name中不能包含大写字母name;2.不能以"."(点)或者"_"(下划线)开头
	"version": "1.0.0", //项目版本
	"description": "A Vue.js project", //项目描述
	"author": "", //作者
	"private": true, //如果你不希望授权别人以任何形式使用私有包或未发布的包，设为true这个包将不会发布到NPM平台下
	"scripts": { //指定了运行脚本命令的npm命令行缩写，比如push指定了运行npm run dev时，所要执行的命令
		"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
		"start": "npm run dev",
		"build": "node build/build.js"
	},
	"dependencies": { //指定依赖的其它包，这些依赖是指包发布后正常执行时所需要的，也就是线上需要的包。它们将会被安装在node_module目录下
		"element-ui": "^2.9.1",
		"vue": "^2.5.2",
		"vue-router": "^3.0.1"
	},
	"devDependencies": { //开发环境依赖包列表。这些依赖只有在开发时候才需要，它们将会被安装在node_module目录下
		//NPM使用语义版本号来管理代码，语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号
		//当代码变更时，版本号按以下原则更新。
		// 1.如果只是修复bug，需要更新Z位。
		// 2.如果是新增了功能，但是向下兼容，需要更新Y位。
		// 3.如果有大变动，向下不兼容，需要更新X位
		//version，必须匹配某个版本，如：1.1.2，表示必须依赖1.1.2版
		//>version，必须大于某个版本，如：>1.1.2，表示必须大于1.1.2版
		//~version，大概匹配某个版本，~1.1.2，表示>=1.1.2 <1.2.0
		//^version，兼容某个版本，如：^1.1.2 ，表示>=1.1.2 <2.0.0
		"autoprefixer": "^7.1.2",
		"babel-core": "^6.22.1",
		"babel-helper-vue-jsx-merge-props": "^2.0.3",
		"babel-loader": "^7.1.1",
		"babel-plugin-syntax-jsx": "^6.18.0",
		"babel-plugin-transform-runtime": "^6.22.0",
		"babel-plugin-transform-vue-jsx": "^3.5.0",
		"babel-preset-env": "^1.3.2",
		"babel-preset-stage-2": "^6.22.0",
		"chalk": "^2.0.1",
		"copy-webpack-plugin": "^4.0.1",
		"css-loader": "^0.28.0",
		"extract-text-webpack-plugin": "^3.0.0",
		"file-loader": "^1.1.4",
		"friendly-errors-webpack-plugin": "^1.6.1",
		"html-webpack-plugin": "^2.30.1",
		"node-notifier": "^5.1.2",
		"optimize-css-assets-webpack-plugin": "^3.2.0",
		"ora": "^1.2.0",
		"portfinder": "^1.0.13",
		"postcss-import": "^11.0.0",
		"postcss-loader": "^2.0.8",
		"postcss-url": "^7.2.1",
		"rimraf": "^2.6.0",
		"semver": "^5.3.0",
		"shelljs": "^0.7.6",
		"uglifyjs-webpack-plugin": "^1.1.1",
		"url-loader": "^0.5.8",
		"vue-loader": "^13.3.0",
		"vue-style-loader": "^3.0.1",
		"vue-template-compiler": "^2.5.2",
		"webpack": "^3.6.0",
		"webpack-bundle-analyzer": "^2.9.0",
		"webpack-dev-server": "^2.9.1",
		"webpack-merge": "^4.1.0"
	},
	"engines": { //指定包运行的环境
		"node": ">= 6.0.0",
		"npm": ">= 3.0.0"
	},
	//根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器
	//last 2 versions：CanIUse.com追踪的IE最新版本为11,向后兼容两个版本即为10、11
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not ie <= 8"
	]
}

 这里我们暂时用scripts中的属性，更改访问的端口号，随便改什么都行，不过要注意端口不重合。

3.自己写组件到页面

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>

 配置路由，修改组件引用

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

 首页：

关于

 

三、路由嵌套

路由嵌套是为了满足页面嵌套需求

1、创建About1.vue、About2.vue

 About1

<template>
  <div>
    关于edg夺冠
  </div>
</template>

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

<style>
</style>

About2

<template>
  <div>
    关于dk第二
  </div>
</template>

<script>
  export default {
    name: 'About2',
    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 About from '@/components/About'
import About1 from '@/components/About1'
import About2 from '@/components/About2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',
      name: 'About',
      component: About,
      children:[
        {
          path: '/About1',
          name: 'About1',
          component: About1
        },{
      path: '/About2',
      name: 'About2',
      component: About2
    }
      ]
    }
  ]
})

3、定义锚点

因为About1和About2是About的子节点，所以放在About中

<template>
  <div>
    <router-link to="/About1">关于1</router-link>
    <router-link to="/About2">关于2</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>

4.效果

a.首页

 b.关于