Vue-CLI脚手架与node.js安装

前言：

Vue-CLI 是一个基于 Vue.js 快速开发单页应用的官方脚手架工具，能够帮助开发者快速搭建前端项目的基础结构。在开始使用 Vue-CLI 前，首先需要安装 Node.js，因为 Vue-CLI 是基于 Node.js 构建的。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，能够让 JavaScript 在后端也能够运行。安装 Node.js 后，就可以通过 npm（Node.js 的包管理工具）来安装 Vue-CLI，并开始使用它来创建 Vue 项目。

在本文中，我们将介绍如何安装 Vue-CLI 脚手架工具以及 Node.js，为后续的 Vue 项目开发做好准备。让我们一起来学习如何搭建一个完整的前端开发环境吧！

作者建议:学习知识在于深度理解，多动手、多动脑，总能更快地领悟。不要仅仅停留在阅读代码的层面，亲自动手敲打一遍，会带来更丰富的收获。通过实践，我们能够更深入地理解知识，掌握技能，并且在解决问题时更加得心应手。相信自己的能力，坚持不懈地实践，你将会取得更大的进步和成就。让学习成为一种习惯，让动手实践成为你提升的捷径，加油！你是最棒的!

目录

前言：

Vue-cli的优点

安装nods.js环境

搭建vue脚手架项目 

​编辑 项目结构解读​编辑

 常用命令

创建组件

组件路由

在终端下载router组件

配置路由

路由嵌套

---

Vue-cli的优点

1. 快速上手，提高开发效率:

1. 项目初始化: Vue CLI 提供了丰富的模板，可以快速生成项目结构，并配置好必要的依赖，省去了手动配置的时间。
2. 项目管理: Vue CLI 提供了命令行工具，方便管理项目，例如创建组件、运行项目、打包项目等。
3. 插件系统: Vue CLI 支持丰富的插件，可以根据项目需求扩展功能，例如路由、状态管理、UI 框架等。

2. 降低学习成本:

1. 简单易学: Vue CLI 的使用非常简单，即使是新手也可以快速上手。
2. 丰富的教程: 网上有很多关于 Vue CLI 的教程，方便开发者学习。

但是使用Vue-cli(脚手架)前提是安装node.js环境.

安装nods.js环境

下载地址:

node.js官网下载地址https://nodejs.org/en/download/package-manager选择版本下载:版本16.20.2

 进行安装:点击

下一步：

 

 

 

验证node.js安装是否完成 

打开终端进行测试,输入 node -v 和 npm -v 指令，若如下图所示，则表明node.js环境安装成功

搭建vue脚手架项目 

在HBuilderX中创建vue项目

注意：这里以vue2为例，所以创建vue项目(2.6.10)

项目创建成功,运行代码 npm run serve命令运行项目

外部命令运行

项目网址

 运行成功的网页样式

 项目结构解读

 常用命令

 npm run serve

该命令用来运行项目，在上面有演示

Ctrl+C

在终端Ctrl+C，选择是否结束运行项目

npm install

下载并安装依赖，即node_modules。

我们一般在网上下载的项目中都不会有node_modules文件，因为node_modules文件太大了，项目中存在package.json文件，我们需要的依赖地址都在这个文件中，我们可以通过npm install指令来下载(类似maven)

注意:下载前我们需要删除package-lock.json 文件(本文件存放依赖的以前地址,软件可能通过本文件中的地址来找依赖)

下面代码可以避免package-lock.json 文件生成

npm config set package-lock false

npm run build

用来打包项目，生成一个dist文件夹 ，类似于maven的打包功能

创建组件

vue-cli中讲不同的网页(项目)看做成不同的组件,我们只需要创建vue文件,来编写组件,最后都会在index.html文件中实现

组件模本格式 

<template>
	<!-- 我们之前的html代码写在<template>标签中 -->
	<div>
	<!-- 组件中必须有一个跟标签 -->	
	</div>
</template>
 
<script>
	// 这里不能new vue对象,要先导出组件(export)
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>
 
<style>
	/* css内容 */
</style>

组件路由

 简单理解:组件路由就是组件之间切换(路由绑定组件地址等)与链接(路由嵌套,也就是在一个路由下写子路由)

在终端下载router组件

在终端输入命令:npm i vue-router@3.5.3

下载成功后如下文图

配置路由

在src目录下创建一个router包，并创建一个index.js文件,并配置index.js中路由的配置

我们需要再index.js(路由文件)中配置组件的地址,路由的链接(嵌入)等 

path用来定义component所绑定的组件地址。component后的组件名必须和import后的名字对应相同

代码：

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */

import Login from '../Login.vue'; /* 导入其他组件 */
import Main from '../Main.vue'; /* 导入其他组件 */
import MagorList from '../views/major/MajorList.vue'; /* 导入其他组件 */
import StudentList from '../views/student/StudentList.vue'; /* 导入其他组件 */

Vue.use(router);

/* 定义组件路由 */
var rout = new router({
	routes: [{
			path: '/',
			component: Login
		},
		{
			path: '/login',
			component: Login
		},
		{
			path: '/main',
			component: Main

		}
	]
});

//导出路由对象
export default rout;

路由嵌套

就是在一个主路由下面放一个子路由

实例：在mian这个路由下面放majorlist路由与studentlist路由他们可以在major路由中打开别的路由

		{
			path: '/main',
			component: Main,
			children: [{
					path: "/majorlist",
					component: MagorList
				},
				{
					path: "/studentlist",
					component: StudentList
				}
			]

		}

效果解释：注意网址改变了