vue-cli安装与搭建SPA项目

文章目录

一、Vue CLI
二、用CLI完成spa项目的构建
三、基于spa项目完成路由
四、嵌套路由

一、Vue CLI

1.1 脚手架

脚手架（Scaffold）是一种用于快速搭建项目结构和生成基础代码的工具。它可以帮助开发者自动创建项目的基本目录结构、配置文件和一些常用的代码模板，从而减少手动配置和重复劳动。

脚手架通常提供了一些命令行工具，通过简单的命令就能完成项目的初始化和生成代码的过程。脚手架可以大大提高开发效率，让开发者能够更快地开始项目的开发工作。在前端开发中，Vue CLI、Create React App 和 Angular CLI 等都是常见的脚手架工具。

1.2 Vue CLI

Vue CLI 是一个基于 Vue.js 的官方脚手架工具，用于快速搭建 Vue.js 项目。它提供了一套完整的开发环境，包括项目初始化、开发服务器、构建工具等。使用 Vue CLI 可以帮助开发者快速搭建 Vue.js 项目，并提供了一些常用的开发工具和插件，方便开发者进行开发、调试和部署。

1.3 安装 Vue CLI

在cmd窗口输入 npm install -g vue-cli，安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功
在这里插入图片描述

二、用CLI完成spa项目的构建

2.1 使用脚手架创建项目骨架

在工作区间打开cmd输入 vue init webpack spa1

#spa1即为项目名，项目名不能用中文或大写字母

在这里插入图片描述

注：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致
修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001 切换回中文：chcp 936
两条命令只在当前窗口生效，重启后恢复之前的编码。

2.2 “一问一答”模式

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 es, use Yarn No, I will handle that myself //选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖

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

在这里插入图片描述

2.3 安装项目所需nmp

cd xqx_spa 将路径进到xqx_spa文件夹下

npm install 安装所有项目需要的npm模块

npm run dev 运行项目
在这里插入图片描述
打开网址 http://localhost:8080/#/

2.4 项目结构简介

在这里插入图片描述

- build 存放构建相关的配置和脚本文件
- src
  - assets：存放静态资源，如图片、字体等
  - components：存放可复用的Vue组件
  - views：存放页面级别的Vue组件
  - router：存放Vue Router的配置文件
  - store：存放Vuex的状态管理文件
  - services：存放与后端API通信的服务文件
  - utils：存放工具函数或辅助类
  - styles：存放全局样式文件
  - App.vue：根组件
  - main.js：入口文件，初始化Vue应用并挂载根组件
- public：存放不需要经过打包处理的静态资源，如index.html
- node_modules 文件夹中包含了项目所需的各种第三方库和模块
- package.json：项目的依赖配置文件
- babel.config.js：Babel的配置文件
- vue.config.js：Vue CLI的配置文件

在这里插入图片描述

三、基于spa项目完成路由

3.1 自定义组件

在HelloWorld.vue所在的components文件夹建立组件

<template>
	<div>	{{msg}}</div>
</template>

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

<style>
</style>

<template>
	  <div>
		  关于本站哈哈哈哈哈
	  </div>
</template>

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

<style>
</style>

3.2 创建路由集合

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'

Vue.use(Router)

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

3.3 挂载

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>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述

四、嵌套路由

4.1 创建组件

AboutMe.vue 和 AboutWeb.vue

<template>
	  <div>
		 {{msg}}
	  </div>
</template>

<script>
	export default {
	  name: 'AboutMe',
	  data () {
	    return {
	      msg: '我是站长'
	    }
	  }
	}
</script>

<style>
</style>

<template>
	  <div>
		 {{msg}}
	  </div>
</template>

<script>
	export default {
	  name: 'AboutWeb',
	  data () {
	    return {
	      msg: '本站哈哈哈哈'
	    }
	  }
	}
</script>

<style>
</style>

4.2 创建路由集合

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 AboutWeb from '@/components/AboutWeb'

Vue.use(Router)

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

4.3 挂载

About.vue

<template>
	  <div>
		  <router-link to='/AboutMe'>关于我</router-link>
		  <router-link to='/AboutWeb'>关于本站</router-link>
		  <router-view></router-view>
	  </div>
</template>

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

<style>
</style>

在这里插入图片描述