Node.js环境安装和Vue-cli脚手架构建过程

Node.js环境安装

1. 前言
Node.js简介

Node.js 是一个开源的、跨平台的 JavaScript 运行环境，它允许开发者使用 JavaScript 编写服务器端代码。Node.js 基于 Google 的 V8 JavaScript 引擎构建，该引擎是 Chrome 浏览器中用于解析和执行 JavaScript 的核心组件。因此，Node.js 能够以接近原生的速度运行 JavaScript 代码。

2. 准备工作
检查系统要求（Windows、macOS 或 Linux）
配置开发环境（如：更新操作系统、关闭防火墙或杀毒软件等特殊情况）
我这里的是Window 11家庭中文版的23H2版本的系统，去安装对应的64位版本

3. 下载与安装 Node.js

下载

https://nodejs.org/en/download

安装 测试

安装

测试

win+r 打开终端命令行,按如图输入,并正确显示,则说明安装好

vue-cli 搭建项目

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义

好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个

骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

主要的功能

 统一的目录结构

 本地调试

 热部署

 单元测试

 集成打包上线

vue-cli需要的环境

Node.js,Node.ja可以看作是js语言解释器

npm,npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码

vue.js体积小(压缩后基本都是kb级的),运行速度快

以下图示使用 HbuilderX 快速搭建一个 vue-cli 项目

创建项目时使用vue项目2.6.10版本,创建成功后启动项目

点这个>-  打开终端命令行输入 npm run serve  启动项目

或者按下面这个图操作,直接启动项目

启动成功后,会出现访问项目地址: http://127.0.0.1:8080/

(在命令行中 ctrl+c 停止服务)

点击项目访问地址,若出现下图,则说明环境安装和项目创建都没问题

项目结构分析

命令行输入npm run builder,对项目进行打包,生成一个dist目录,类似于java中的maven

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建

单页面应用变得易如反掌。

安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。 打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

下载后进行搭建

搭建步骤:

1. 创建 router 目录

创建 index.js 文件,在其中配置路由

import Vue from 'vue';

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

import login from '../views/login'; /* 导入其他组件 */

import content from '../components/content'; /* 导入其他组件 */

Vue.use(router)

/* 定义组件路由 */

var rout = new router({

routes: [

{

path: '/index',

name: 'index',

component: index

},

{

path: '/content',

component: content

}

]

});

// 导出路由对象

export default rout;

2.使用路由

<router-link to="/index"> 首页 </router-link>

<router-link to="/content"> 内容 </router-link>

<router-view/> 3.在 main.js 中配置路由

import router from './router/index.js'

Vue.use(router);

new Vue({

el: '#app',

router,

render: h => h(App)

})

4. 路由导航守卫

为路由对象，添加 beforeBach 导航守卫

to- 将要访问的页面地址 ,from- 从哪个页面访问的 ,next- 放行函数

rout.beforeEach((to,from,next)=>{

if(to.path=='/login'){ 如果用户访问的登录页，直接放行

return next();

}else{

var token = window.sessionStorage.getItem("token");

if(token==null){

return next("/login");

}else{

next();

}

}

})

5. 路由嵌套

{

path: '/main',

component: Main, // 路由嵌套 在 main 下面的嵌套子路由

children:[

{

path:"/admin",

component:Admin

}

]

} 6. 路由传参

<router-link :to="{path:'/User',query:{num:id,name:'jim'}}">

用户

</router-link>

目标组件获取地址参数

this.$route.query.num