前端工程化(vue2)

一、环境准备

1.依赖环境:NodeJS

官网:Node.js

2.脚手架:Vue-cli

参考网址:安装 | Vue CLI

介绍:Vue-cli用于快速的生成一个Vue的项目模板。主要功能有:统一的目录结构,本地调试,热部署,单元测试,集成打包。

//全局安装脚手架
npm install -g @vue/cli
//通过查看vue版本,判断脚手架是否安装成功
vue --version

​​​​​​

二、创建vue项目

1.命令行创建vue

参考网址:创建一个项目 | Vue CLI

命令行操作:
创建vue项目:
vue create project-name(vue项目名称自定义) 
eg:
-Manually select features
-Babel Router
-2.x
-yes,In package.json,yes,babel-router
图形化界面操作
图形化界面创建vue项目:
1.vue ui

然后再当前目录下,直接输入命令vue ui进入到vue的图形化界面,如下图所示:

然后我门选择创建按钮,在vue文件夹下创建项目,如下图所示:

然后来到如下界面,进行vue项目的创建:

然后预设模板选择手动,如下图所示:

​​​​​​​

然后再功能页面开启路由功能,如下图所示:

然后再配置页面选择语言版本和语法检查规范,如下图所示:

然后创建项目,进入如下界面:

最后我们只需要等待片刻,即可进入到创建创建成功的界面,如下图所示:

到此,vue项目创建结束

​​​​​​​

2.vue项目目录介绍

3.运行vue项目

(1)方式一:命令行方式

直接基于cmd命令窗口,在vue目录下,执行输入命令npm run serve即可,如下图所示:

(2)方式二:vscode图形界面

1.NPM脚本窗口调试出来

第一步:通过设置/用户设置/扩展/MPM更改NPM默认配置,如下图所示

然后重启VS Code,并且双击打开package.json文件,然后点击资源管理器处的3个小点勾选npm脚本选项,如图所示

2.点击NPM脚本中的serve运行vue项目

3.补充

对于8080端口,经常被占用,所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容,添加如下代码:

devServer:{port:7000
}

如下图所示,然后我们关闭服务器,并且重新启动,端口更改成功,可以通过浏览器访问7000端口来访问我们之前的项目

三、Vue项目开发流程

index.html

1.我们浏览器访问的首页是index.html,在public/index.html;vue项目使得浏览器所呈现的index.html内容却很丰富。

main.js

2.对于vue项目,index.html默认是引入了入口函数main.js,在src/main.js。

//main.js 代码
import Vue from 'vue'
import App from './App.vue'     //导入当前目录下得App.vue并且起名为App
import router from './router'
​
Vue.config.productionTip = false
​
new Vue({router,   //相当于router : routerrender: h => h(App)
}).$mount('#app')
​
代码关键点:
import:导入指定文件,并重新起名。
new Vue():创建vue对象
$mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。(main.js中通过代码挂在到index.html的id=app的标签区域的)
router:路由
render:主要使用视图的渲染(将App对象渲染过来,这App对象就是App.vue组件,根组件)

App.vue

3.App.vue(根组件,整个页面看到的内容)

vue组件:.vue结尾的都是vue组件

vue的组件文件包含3部分:
- template: 模板部分,主要是HTML代码,用来展示页面主体结构的
- script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的
- style: css样式部分,主要通过css样式控制模板的页面效果的

四、Vue组件库Element:美观页面

Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。

ElementUI就是一款侧重于V开发的前端框架,主要用于开发美观的页面的。

参考网址:Element - The world's most popular Vue UI framework

1.安装ElementUI

npm i element-ui -S

2.在main.js这个入口js引入ElementUI的组件库

//在main.js中添加以下代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
​
Vue.use(ElementUI);

3.创建组件文件,创建.vue后缀的vue组件文件

//在src/views目录下创建一个vue组件文件,注意组件名称后缀是.vue
//基本组件代码,vue组件包括3部分:模板,脚本,样式
<template>
​
</template>
​
<script>
export default {
​
}
</script>
​
<style>
​
</style>

4.使用Vue组件库Element代码到组件文件

去ElementUI的官网,找到组件库Element - The world's most popular Vue UI framework,把需要用到的组件代码复制出来到组件文件中template模块中使用

5.在App.vue中使用自定义的组件

在默认访问的根组件src/App.vue中引入我们自定义的组件,具体操作步骤如下:

然后App.vue组件中的具体代码如下,代码是我们通过上述步骤引入element-view组件时自动生成的

<template><div id="app"><!-- {{message}} --><element-view></element-view></div>
</template>
​
<script>
import ElementView from './views/Element/ElementView.vue'
export default {components: { ElementView },data(){return {"message":"hello world"}}
}
</script>
<style>
​
</style>

五、路由:实现页面切换

前端路由:URL中的hash(#号之后的内容)与组件之间的对应关系。(当点击导航栏时,浏览器的地址栏会发生变化,路由自动更新显示与url所对应的vue组件。)

Vue官方提供的路由插件:Vue Router的组成:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染中选中的组件。

  • <router-link>:请求连接组件,浏览器会解析成<a>标签。

  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件。

工作原理:

1.安装vue-router插件:

npm install vue-router
(提示:在安装脚手架的时候,已经勾选了路由功能就不需要再次安装了)

2.定义路由表(在src/router/index.js文件)

//根据其提供的模板代码进行修改
//注意需要去掉没有引用的import模块。
import Vue  'vue'
import VueRouter  'vue-router'Vue.use(VueRouter)const routes = [{path: '/emp',  //地址hashname: 'emp',component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')}
]const router = new VueRouter({routes
})export default router

在main.js入口中已经引入了router功能:

//main.js文件
import router from './router'

这里路由基本信息配置好了,路由表已经被加载,此时我们还缺少2个东西,就是<router-link>和<router-view>

3.在自定义组件中定义<router-link>

//<router-link>组件,用户点击,发出路由请求;根据路由请求,在路由表中找到对应的vue组件;
eg:
<el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link>
</el-menu-item>

4.在App.vue中定义<router-view>,作为组件的切换

//在自定义组件中定义<router-link>后,发送路请求,在路由表中找到对应的vue组件,最后VueRouter会切换<router-view>中的组件,进行视图更新。
eg:
<template><div id="app"><!-- {{message}} --><!-- <element-view></element-view> --><!-- <emp-view></emp-view> --><router-view></router-view></div>
</template><script>
// import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {components: { },data(){return {"message":"hello world"}}
}
</script>
<style></style>

六、项目打包部署

1.前端工程打包

我们直接通过VS Code的NPM脚本中提供的build按钮来完整,如下图所示,直接点击即可:

然后会在工程目录下生成一个dist目录,用于存放需要发布的前端资源,如下图所示:

2.前端工程部署

(1)安装nginx

nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用。

其目录结构:(如果要发布项目,直接将资源放进html目录下)

(2)部署前端工程

将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下,如下图所示:

然后我们通过双击nginx下得nginx.exe文件来启动nginx,如下图所示:

nginx服务器的端口号是80,所以启动成功之后,我们浏览器直接访问http://localhost:80 即可,其中80端口可以省略。

到此,我们的前端工程发布成功。

注意:如果80端口被占用,我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/185888.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑msvcp110.dll丢失怎么办,msvcp110.dll缺失的详细修复步骤

在现代科技发展的时代&#xff0c;电脑已经成为我们生活和工作中不可或缺的工具。然而&#xff0c;由于各种原因&#xff0c;电脑可能会出现一些问题&#xff0c;其中之一就是msvcp110.dll文件丢失。这个问题可能会导致一些应用程序无法正常运行&#xff0c;给我们的生活和工作…

muduo源码剖析之TcpClient客户端类

简介 muduo用TcpClient发起连接&#xff0c;TcpClient有一个Connector连接器&#xff0c;TCPClient使用Conneccor发起连接, 连接建立成功后, 用socket创建TcpConnection来管理连接, 每个TcpClient class只管理一个TcpConnecction&#xff0c;连接建立成功后设置相应的回调函数…

虚拟机复制后,无法ping通问题解决

虚拟机复制后&#xff0c;无法ping通问题解决 可能出现的现象 ssh工具连接不上虚拟机&#xff1b;虚拟机ping不通外网或者ping不通内网其它虚拟机&#xff1b; 原因 原虚拟机和新复制出来的虚拟机的ip地址重复&#xff1b;原虚拟机和新复制出来的虚拟机的MAC地址重复&#…

基于SSM的建筑装修图纸管理平台

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

【Hugging Face】如何下载模型文件

参考文章&#xff1a; 1、mac安装Homebrew - 知乎 2、 ssh连接 git lfs install git clone githf.co:bert-base-uncased -- 安装Homebrew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" -- 配置文件生效 source /Use…

本地数据库迁移到云端服务器

工具迁移xtrabackup 创建云服务器——通过云服务器提供的公网地址远程连接XShell——利用迁移工具将数据库从本地迁移到云服务器 &#xff08;1&#xff09;创建云服务器 &#xff08;2&#xff09;远程连接XShell &#xff08;3&#xff09;yum安装mysql &#xff08;4&…

多语言翻译软件 Mate Translate mac中文版特色功能

Mate Translate for Mac是一款多语言翻译软件&#xff0c;Mate Translate mac可以帮你翻译超过100种语言的单词和短语&#xff0c;使用文本到语音转换&#xff0c;并浏览历史上已经完成的翻译。你还可以使用Control S在弹出窗口中快速交换语言。 Mate Translate Mac版特色功能…

1、C语言面向对象引入类和对象的概念

什么是类和对象 类 类是用户自定义的一种数据类型&#xff0c;也称类类型——C语言中的结构体 对象 类的一种具象 代码测试 #include <stdio.h>//类 struct Animal{ char name[12];//成员属性 int age; char sex; void (*peat)();//成员方法 void (*pbeat)(); };void…

latex加密符号怎么打|同态加密|Paillier

最近在写论文的时候遇到了一点阻碍&#xff0c;因为论文中需要用到paillier加密算法&#xff0c;想用一个公式表达加密的过程&#xff0c;但是不知道怎么打加密符号。 加密符号如下所示&#xff1a; 其中a是被加密的数字 $[\![a]\!] $ 公式&#xff1a; \begin{equation} …

Android 内存泄漏分析思路和案例剖析

分析思路 内存泄漏是指 Android 进程中&#xff0c;某些对象已经不再使用&#xff0c;但被一些生命周期更长的对象引用&#xff0c;导致其占用的内存资源无法被GC回收&#xff0c;内存占用不断增加的一种现象&#xff1b;内存泄漏是导致我们应用性能下降、卡顿的一种常见因素&…

【赠书第2期】嵌入式虚拟化技术与应用

文章目录 前言 1 背景概述 2 专家推荐 3 本书适合谁&#xff1f; 4 内容简介 5 书籍目录 6 权威作者团队 7 粉丝福利 前言 随着物联网设备的爆炸式增长和万物互联应用的快速发展&#xff0c;虚拟化技术在嵌入式系统上受到了业界越来越多的关注、重视和实际应用。嵌入式…

算法进阶指南图论 通信线路

通信线路 思路&#xff1a;我们考虑需要升级的那条电缆的花费&#xff0c;若其花费为 w &#xff0c;那么从 1 到 n 的路径上&#xff0c;至多存在 k 条路径的价值大于 w &#xff0c;这具有一定的单调性&#xff0c;当花费 w 越大&#xff0c;我们路径上价值大于 w 的花费会越…

命令行远程操作windows

如遇安装python模块问题&#xff0c;请参考此连接处理&#xff1a;http://t.csdnimg.cn/l9W6f 一、命令行中使用ssh连接 1、安装 OpenSSH 客户端&#xff1a; 在 Windows 10 中&#xff0c;打开“设置”应用&#xff0c;选择“应用” > “可选功能” > “添加功能”。…

CCLINK IEFB总线转ETHERNET/IP网络的协议网关使欧姆龙和三菱的数据互通的简单配置方法

想要实现CCLINK IEFB总线和ETHERNET/IP网络的数据互通。 捷米JM-EIP-CCLKIE是一款ETHERNET/IP从站功能的通讯网关&#xff0c;该产品主要功能是实现CCLINK IEFB总线和ETHERNET/IP网络的数据互通。本网关连接到ETHERNET/IP总线和CCLINK IEFB总线上都可以做为从站使用。网关分别…

uni-app学习笔记(二)

目录 一、路由与页面跳转 1、tabar与普通页面跳转例子 2、navigateTo 3、switchTab 二、vue组件 1、传统vue组件的使用 2、easycom 三、uView组件库 1、安装配置 2、引入配置 3、使用 四、Vuex 1、认识 2、state基本使用 3、mapState使用 五、网络请求 1、封装…

云数据仓库实践:AWS Redshift在大数据储存分析上的落地经验分享

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

【ChatGPT】人工智能的下一个前沿

&#x1f38a;专栏【ChatGPT】 &#x1f33a;每日一句&#xff1a;慢慢变好,我是,你也是 ⭐欢迎并且感谢大家指出我的问题 文章目录 一、引言 二、ChatGPT的工作原理 三、ChatGPT的主要特点 四、ChatGPT的应用场景 五、结论与展望 ​​​​​​​ 一、引言 随着人工智能技…

MyBatis(二)

3. MyBatis获取参数值的两种方式 两种方式&#xff1a;${}和#{} ${}的本质就是字符串拼接&#xff0c;#{}的本质就是占位符赋值${}使用字符串拼接的方式拼接sql&#xff0c;若为字符串类型或日期类型的字段进行赋值时&#xff0c;需要手动加单引号&#xff1b;但是#{}使用占位…

ClickHouse开发系列

一、 ClickHouse详解、安装教程_clickhouse源码安装 二、ClickHouse 语法详解_clickhouse讲解 三、ClickHouse SQL 操作语句详解 四、ClickHouse 高级教程—官方原版 五、ClickHouse主键索引最佳实践 六、MySQL与ClickHouse集成 七、ClickHouse 集成MongoDB、Re…

Yolov8部署——vs2019生成解决方案问题

Yolov8部署——vs2019生成解决方案问题 &#xff08;1&#xff09;Yolov8部署 最近开始在win10上部署Yolov8,并用tensorrt加速&#xff0c;从此贴开始记录后续遇到的部署问题。 &#xff08;2&#xff09;vs2019生成解决方案问题 报错如下图&#xff1a; NvInfer.h是Tenso…