前端项目搭建基本流程
前端项目搭建的流程:
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
前端项目搭建基本流程相关推荐
- vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- dajngo3,vue3前端项目搭建,vue项目结构的介绍
前端项目搭建 查看当前node版本 [dalaojun@localhost django_luichun]$ node -v v14.15.0 查看npm版本 [dalaojun@localhost ...
- vue简易微前端项目搭建(一):项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- nodejs的前端项目搭建以及登陆接口开发
nodejs学习 1.express & nodejs & mysql 新建项目 2.nodejs尝试登陆接口 3.nodejs的前端项目搭建以及登陆接口开发 4.前端上传图片form ...
- 在线考试系统(二)前端项目搭建
在线考试系统 前端项目搭建 安装nodejs和cnpm 查看node和cnpm版本 安装vue-cli 或者升级vue-cli版本 创建vue项目 测试项目是否启动成功 Npm和cnpm和yarn区别 ...
- 前端项目常规开发流程总结
1. 前言 研二上学期学期结束了,有不少收获,其中之一便是与所在实习企业对接了一个前端项目,对前端开发流程有了一个比较直观的印象,了解了现在前端开发过程中比较流行的技术和工具.也遇到了一些开发过程中常 ...
- 深度学习大厂前端项目开发全流程全流程
用户审美的要求越来越高,也就使得越来越多的公司和企业注重线上用户的体验,都想要向外界传达出众的气质形象和重要信息,所以,Web前端人员的需求也越来越大. 深度学习大厂项目开发全流程全流程 在国外企业, ...
- 前端项目搭建部署全流程(一):搭建React项目
1.前言 前段时间突发一个想法,想尝试从零开始搭建一个React项目模板,发布到GitHub,再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块,然后再用这个模板结合之前的一套组件库,完成编译打 ...
- 从零开始搭建仿抖音短视频App-前后端开发模式,前端框架的选择、前端项目搭建
目录 前后端开发模式 传统JavaWeb开发模式 前后端分离模式编辑 前端框架的选择-UniApp介绍 内网互通原则 运行到iphone与Android 前后端开发模式 传统JavaWeb开发模式 ...
- 前端项目中的CI/CD实践(自动化部署)
前言 前置知识 Linux Docker Nginx Github 可以干嘛 作为一套面向开发和运维团队的解决方案,CI/CD 主要解决集成新代码和向用户频繁交付应用的问题. 更直接地说,就是可以解放 ...
最新文章
- 秒懂词向量Word2vec的本质
- springboot配置文件加载位置
- nginx大量TIME_WAIT的解决办法 netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'...
- lms自适应滤波器实现噪声干扰的语音恢复_ZLG深度解析语音识别技术
- 2014年第五届蓝桥杯C/C++ A组国赛 —— 第一题:海盗分金币
- AFN2.0到3.0的迁移
- Logistic回归 python实现
- 诗与远方:无题(七十九)- 望红云而作
- 装逼 | 10个JS精简代码无形装逼集合,最为致命,记得收藏好
- 华强北万事俱备,只待 iPhone 11到货
- 用3D动画来完成的一个立体图片
- 语料库python_NLPPython笔记——语料库
- 多个高危漏洞可导致 Chrome 浏览器被黑
- window.onload和jQuery的ready函数区别
- 笔谈FFmpeg(二)
- Linux基础之tr与重定向管道
- 《WEB全栈工程师的自我修养》--索引笔记
- FTP(匿名登录)未授权访问漏洞复现(vsftpd2.3.4)
- Labview编程模式
- 无线ap的ntp服务器,怎么配置cisco路由器的NTP
热门文章
- axure能做剪切蒙版吗_二手车销售好做吗?没经验能做二手车销售吗?
- 想做个磁力链搜索引擎 3
- 如何用OpenCV给图片加上文字?
- 人工智能在日常农业种植中的应用
- [Telink][TLSR8251] [泰凌微][SDK3.4] 上手第二步 框架介绍
- 微信小程序---配置微信商户平台进行微信支付操作指南以及踩坑记录
- Windows系统中Word文档在插入公式时,公式按钮是灰色的(无法插入公式)的解决办法
- 吉他入门:吉他音阶训练入门教程(二)
- 计算机一级字幕设置,如何开启电脑哔哩哔哩中的CC字幕功能
- 【菜鸟练习】用Java实现高尔顿瓶