vue-cli搭建项目过程

yyyyyyykk

于 2024-08-25 18:02:18 发布

阅读量621

点赞数 15

分类专栏：前端文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/2302_78078800/article/details/141530173

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.前言

传统的前端项目架构：

指的就是一个项目中有很多个HTML文件，每一个HTML文件都是相互独立的，如果需要在页面中导入一些外部依赖的css,js文件，就需要在每一个html文件中都导入就会显得特别麻烦，而且这些外部依赖的css，js文件还都需要我们去官网下载。

现在的前端项目架构：

在一个node环境中构建项目，node(前端的开发环境)类似于后端的maven，与传统的前端项目架构不同的是，现在的前端项目架构中改为了单页面架构(一个项目中只有一个.html文件)，切换页面也是通过主页面去调用其他的组件(.vue文件)实现的。

二.什么是vue-cli？

vue-cli是官方提供的一个脚手架，用于快速生成vue的项目模板，预先定义好的目录结构及基础代码，就好比在IDEA中创建maven项目时可以选择一个骨架项目，这个骨架项目就叫脚手架，可以使我们开发更为迅速。

1.主要的功能

1.具有统一的目录结构

2.可以本地调试

3.热部署

4.单元测试

5.集成打包上线

2.需要配置的环境

Node.js

简单地说Node.js就是前端js运行环境或者说是js语言解释器。

Node.js官方网址：

https://nodejs.org/en/download

测试Node.js环境是否安装完成：

打开控制台(ctrl+r)，输入node -v和npm -v，如果出现下面版本号证明安装环境完成。

三.使用HbuilderX创建一个vue-cli项目

1.创建项目

打开HbuilderX，找到新建项目，点击创建vue项目(2.6.10) vue-cli默认项目。

点击创建项目，vue-cli项目中会下载很多个项目依赖的外部组件文件，所以会下载的比较缓慢，下载完成后，项目中的结构如下：

2.启动项目

项目创建完成后该如何启动项目呢？

在软件的左下角有一个命令行窗口(终端)中，输入npm run serve（这是启动命令），输入回车后，会出现访问地址。

这两个网址就是我们创建完成运行的网页了。

3.终端命令

命令行中还有那些命令呢？

1.在我们以后从网络中下载的前端程序中，有很多的程序中都是不会有node_modules文件夹的，因为此文件夹占用内存大，而且每个vue-cli项目中都会带有，所以一些程序员就认为没有必要将此文件夹也打包起来，在终端中有一个命令可以解决此问题：

npm install

在终端中输入此命令就可以对此项目下载项目依赖了。但是在下载之前需要先删除 package-lock.json 文件。

如果 package-lock.json 文件被删除后仍然出现，可以在终端中输入命令：
npm config set package-lock false

2.打包命令

npm run build 这个命令就像maven中打包为.jar包一样。

3.停止服务

ctrl+c，项目打开的是我们是不能在终端中书写命令代码的，这个时候就需要先停止服务。

四.组件路由

1.创建组件

组件(.vue文件)一般在src文件夹下创建。创建步骤如下图。

2.组件的一般格式

3.组件路由

我认为组件路由其实就是给项目中的每个组件定义一个地址。（个人认为，有不同见解的可以私信博主）

详细概念：Vue组件路由是指在Vue.js应用中，通过定义和管理路由来控制页面之间的跳转和展示。Vue组件路由可以使用Vue Router插件来实现，通过定义路由规则和对应的组件，可以实现不同路由路径对应不同的组件展示。

在vue组件路由中，一般使用<router-link>组件来创建导航链接(超链接)，<router-view>组件来展示对应组件的内容。可以通过路由参数，动态路由，嵌套路由等方式实现不同场景下的页面导航和展示逻辑。

在终端下载vue-router组件：

打开命令行(终端)：输入：npm i vue-router@3.5.3 下载vue-router插件包。

如果下载很慢或者装不上的话，就在终端中设置华为镜像源（亲测好用）:

终端输入:

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

然后再输入：npm i vue-router@3.5.3 下载vue-router插件包。

五.搭建步骤

1.创建router目录

创建index.js文件，我们就在这里去配置路由。

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

//导入自己项目中的组件
//import 名字 from '组件位置';
 
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>创建导航链接， <router-view>（一般放在App.vue文件中）组件来展示对应组件的内容。

使用<router-view>来实现显示路由：

3.在main.js中配置路由

还有第10行代码中的 router 不要忘记添加进来！！！小细节要记牢。

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.路由嵌套

可以实现在一个页面中去点击或者触发某个事件时候不需要跳转到下个页面，在本页面显示组件。

六.总结

首先非常感谢大家的观看，到这里本篇博客就快要接近尾声了，到这里已经带领大家学习了vue-cli（脚手架）的node.js环境配置，创建vue-cli项目，项目中的各个文件的意义，配置组件路由等内容。希望小博主的分享能够给您给予小小的帮助，创作不易还请大家可以三连支持一下小博主。有什么问题可以私信博主！！！感谢大家！！！