spa项目搭建以及路由循环嵌套

最新推荐文章于 2023-11-30 21:27:30 发布

原创最新推荐文章于 2023-11-30 21:27:30 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

spa项目搭建

根据上一篇博客的基础上
今天我们来搭建一个spa项目
前提：搭建好NodeJS环境

node -v

npm -v

什么是vue-cli?

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

vue init webpack xxx

注1：xxx 为自己创建项目的名称

注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境
安装vue-cli

npm install -g vue-cli、

安装成功后会出现以下文件
在这里插入图片描述
使用脚手架vue-cli(2.X版)来构建项目

步骤一：使用脚手架创建项目骨架

此步骤可理解成：使用eclipse创建一个maven的web项目

cmd #打开命令窗口

d: #切换到d盘

cd d:\temp #进入d:\temp目录

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

                                        #spa1即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式(见注2)

注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致

    修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001

    切换回中文：chcp 936

    这两条命令只在当前窗口生效，重启后恢复之前的编码。

注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                    

         Yes, use Yarn

         No, I will handle that myself     //选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖



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

    # Project initialization finished!

    # ========================

    

    实在不会选，就回车选择“默认”或是选择“N”不安装

步骤二：运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块

此步骤可理解成：maven的web项目创建成功后，修改pom文件添加依赖

cd spa1 #改变路径到spa1文件夹下

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

步骤三：启动并访问项目

此步骤可理解成：启动tomcat，并通过浏览器访问项目

cd spa1

npm run dev

注1：项目启动成功后，打开浏览器输入“http://localhost:8080”即可
在这里插入图片描述

接下来我们打开HBuilderX
打开我们使用doc命令建立的spa项目
然后我们实现一个路由循环嵌套
首先我们创建一个项目叫views
然后在这个项目下面创建四个vue文件
创建vue文件时首字母必须大写，官方说的
About.vue

<template>
  <div class="hello">
	  关于博主个人事迹
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

UserInfo.vue

<template>
  <div class="hello">
	 <router-link to="/UserDetail"> 个人详情</router-link>
	 <router-link to="/UserPwd">修改密码</router-link>
	 <router-view/>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

UserDetail.vue

<template>
  <div class="hello">
		用户详细个人
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

UserPwd.vue

<template>
  <div class="hello">
		用户密码修改界面
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

写完这四个vue文件
我们还需要对index.js文件进行修改
index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/views/About'
import UserInfo from '@/views/UserInfo'
import UserDetail from '@/views/UserDetail'
import UserPwd from '@/views/UserPwd'

Vue.use(Router)

export default new Router({
	routes: [{
			path: '/',
			name: 'About',
			component: About
		},
		{
		path: '/About',
		name: 'About',
		component: About
	},
	{
		path: '/UserInfo',
		name: 'UserInfo',
		component: UserInfo,
		children:[{
			path: '/UserDetail',
			name: 'UserDetail',
			component: UserDetail,
		},
		{
			path: '/UserPwd',
			name: 'UserPwd',
			component: UserPwd,
		},
		]
	}

]

})

然后写完这些我们在使用doc命令到当前文件夹中输入npm run dev
在这里插入图片描述