vue-cli搭建SPA项目

vue-li概念以及安装

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

安装步骤：

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

cmd运行这两条命令，安装成功后，在node.JS解压包下的node_global----》node_modules出现以下两个文件夹

安装完成之后打开命令窗口并输入 vue -V，如果出现相应的版本号，说明安装成功

vue-cli构建项目

cmd进入命令窗口后，输入指令切换到指定的项目存放文件夹，输入：vue init webpack 项目名，它会在当前目录生成一个以你输入的项目名命名的文件夹（项目名不能用中文或大写字母，然后终端会出现“一问一答”模式）

  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安装依赖

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

运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块，输入指令npm install将依赖下载好

项目结构

将新建好的SPA项目导入到HBuliderX，项目结构：

只作项目初始重要结构解释：

assets	外部引入资源，例如图片等
components	vue组件
router	vue路由，一般一个项目此目录下只有index.js文件，将组件集合组装到这个文件
App.vue	项目自带的示例组件
main.js	Vue入口
package.json	在dependencies和devDependencies中 分别对应全局下载和局部下载的依赖包
dev.env.js	配置开发环境
config下的index.js	这个文件进行配置代理服务器，例如：端口号的修改
prod.env.js	配置生产环境

简单测试

这里做个嵌套路由进行简单测试：

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>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  html,
  body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
  }

  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    widows: 100%;
    height: 100%;
  }
</style>

About.vue(组件嵌套）：

<template>
  <div>
  <router-link to="/AboutMe">关于me</router-link>
  <router-link to="/AboutWebSite">关于站点</router-link>
  <router-view></router-view>
  </div>
</template>

<script>
</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 About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebSite from '@/components/AboutWebSite'
import Login from '@/views/Login'
import Register from '@/views/Register'
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
      }]
    }
  ]
})

项目结构：

效果图：

over…