前端项目搭建基本流程

缺乏、安全感 2023-10-02 21:41 24阅读 0赞

前端项目搭建的流程:

1.安装node.js

2.在hbuilderX中创建一个vue-cli项目(脚手架)

3.组件路由

*  vue router是Vue.is官方的路由管理器.它和Vue.is的核心深度集成,让构建单页面应用变得易如反掌.
 *  安装:vue-router是一个插件包,所以我们还是需要用npm来进行安装的,打开命令行工具,进入你的项目目录,输入下面命令 npm i vue-router@3.5.3

4.搭建步骤

*  在main.js中引入router

//配置路由
    import router from './router/index.js'
    Vue.use(router);
    new Vue({
    el: '#app',
    router,
    render: h => h(App)
    })

*  在项目中创建一个router目录,并创建index.js文件,编写路由逻辑.
 *  编辑router下的index.js文件

创建 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;

4.在项目中创建目录并编写

5.在router页面对组件进行页面引入

6.安装element-ui(在项目路径里安装)

> npm i element-ui -S

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue2项目搭建流程

Vue.js 2.0 项目搭建流程： 1. 安装 Node.js 和 npm(Node Package Manager)，npm 是 Node.js 的包管理工具。 2.

冷不防/ 2024年03月25日 05:25/ 0 赞/ 66 阅读

相关前端项目搭建基本流程

前端项目搭建的流程: 1.安装node.js 2.在hbuilderX中创建一个vue-cli项目(脚手架) 3.组件路由 vue router是Vue.is官方

缺乏、安全感/ 2023年10月02日 21:41/ 0 赞/ 25 阅读

相关 Vue项目初始化搭建（个人毕设项目前端搭建流程）

1、基于Vue初始化项目 vue init webpack hr 以开发模式运行 cd hr npm run dev 2、设置启动

谁借莪１个温暖的怀抱￠/ 2023年03月14日 13:17/ 0 赞/ 26 阅读

相关微前端（一）项目搭建

微前端的春风已经吹遍了前端行业，国内可能用qiankun来做微前端最多的吧,我这里也是采用qiankun来进行验证。为了赶上微前端这列车，打算还是写几个demo来验证下。目

曾经终败给现在/ 2023年01月16日 06:56/ 0 赞/ 167 阅读

相关 Vue 搭建一个前端项目

一、前言之前图省事，都是在html中引入`Vue.js`的CDN来使用Vue开发网站项目，其实正确的做法应该是使用Vue构建一个完整的项目，进而进行前后端分离的开发。

ゞ浴缸里的玫瑰/ 2022年12月05日 15:16/ 0 赞/ 244 阅读

相关 vue-cli3 搭建项目流程

上一次用脚手架从零开始搭建项目已经是两年前的事情了，正好最近有一个新项目启动，我决定重新搭建一个，然后梳理一下流程。操作步骤： 1、安装 node：需要在[node官网

红太狼/ 2022年11月06日 14:53/ 0 赞/ 235 阅读

相关开源项目【zheng】搭建流程

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] > 搭建过程项目地址 https://git

旧城等待，/ 2022年10月02日 04:43/ 0 赞/ 264 阅读

相关 php搭建mvc框架-基本流程

搭建属于自己的mvc框架的原因：主要是因为在搭建mvc过程中能让我们对mvc有更深入的了解，也是为了更高的运行效率，还有就是在工作中大部分公司都有自己开发的框架，这样我们能

Dear 丶/ 2022年07月13日 04:15/ 0 赞/ 248 阅读

相关前端运行项目，puer搭建前端服务器

在项目开发的过程当中，总会有前端开发快完成，后端接口却迟迟提供不了的情况。此时为了不影响前端开发的进度，我们可以借助puer来模拟后端接口测试。简单的说，puer就是一个可以实

骑猪看日落/ 2022年03月08日 17:05/ 0 赞/ 266 阅读

相关 vue项目搭建流程

1、安装node(主要用于使用npm包管理器)，配置npm的环境变量安装包下载官网地址：[https://nodejs.org/zh-cn/][https_nodej

àì夳堔傛蜴生んèń/ 2021年09月18日 09:52/ 0 赞/ 561 阅读