超详细的Vue脚手架

文章目录

  • Node.js
    • 介绍
    • 安装
    • 快速入门
      • 控制台输出
      • 使用函数
      • 模块化编程
  • npm包管理器
    • 介绍
    • 命令
      • 初始化命令
      • 本地安装(了解)
      • 全局安装(掌握)
      • 批量下载
      • 淘宝npm镜像(建议使用)
  • Webpack
    • 介绍
    • 安装
    • 快速入门
      • 方式一：webpack原始方式
      • 方式二：基于NPM方式
    • webpack-dev-server 开发服务器
      • 介绍
      • 使用
  • Vue-cli(重点)
    • 介绍
    • 快速入门(前端工程师做)
    • 基础介绍
      • 服务器设置
      • 目录分析
      • 路由
    • 练习
  • Element-UI
  • 综合案例
    • 前后端分离介绍
    • 后端项目环境搭建
    • 前端项目环境搭建
    • 前端项目分析
    • 后端项目

Node.js

介绍

Node.js是一个基于Chorme V8引擎的JavaScript运行环境。Node.js使用一个事件驱动，非阻塞式I/O的模型，使其轻量又高效
可以将Node.js理解成java的JDK
Node.js的包管理器npm，是全球最大的开源库生态系统
总的来说，Node.js是一个开源和跨平台的JavaScript运行时环境，功能类似于浏览器链接

安装

  1. 下载对应的版本：https://nodejs.org/en/download/
  2. 选默认安装即可，一直next(不要修改路径)
  3. 测试，在dos中输入命名node -v 会显示当前node的版本

快速入门

控制台输出

  1. 创建demo1.js,书写代码：
let a=1;
let b=2;
console.log(a+b);
  1. 在文件右键，选择在集成终端打开

Snipaste_2024-04-29_11-22-22.png

  1. 在命令提示符下输入命令 node demo1.js

image.png

使用函数

代码内容改变，与上面步骤一样

function add(a,b){
	return a+b;
}
let c=add(100,200);
console.log(c);

模块化编程

node的exports和require(模块化)
模块就是文件

  1. 创建demo3_1.js文件
exports.add=function(a,b){ // 导出
	return a+b;
}
  1. 创建demo3_2.js文件
let demo= require('./demo3_1');  // 导入 ./ 必须书写，表示使用当前路径导入demo3_1文件的内容
console.log(demo.add(400,600));
  1. 打开集成终端，并输入node demo3_2.js

npm包管理器

介绍

Node Package Manager，是Node.js标准的软件包管理器
可以把它看作maven中依赖管理那部分

命令

初始化命令

init命令是工程初始化命令
先建立一个空文件夹，然后再命令提示符中输入下面命令
命令：npm init
按照提示输入相关信息，如果是用默认值则直接回车即可。

  • name: 项目名称
  • version: 项目版本号
  • description: 项目描述
  • keywords: {Array}关键词，便于用户搜索到我们的项目

最后会生成一个package.json文件，这个是包的配置文件，相当于maven的pom文件

本地安装(了解)

install命令用于安装某个模块，如果想安装express模块(node的web框架),输入下面命令：
node install express
在该目录下已经出现了一个node_modules文件夹 和package-lock.json

  • node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）
  • package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。

我们再打开package.json文件，发现刚才下载的express已经添加到依赖列表中了。

全局安装(掌握)

上面使用的本地安装，会将js库安装在当前目录(node_modules)，只对当前工程有效，而使用全局安装会将库安装到你的全局目录下
查看自己全局目录位置：npm root -g
比如全局安装vue：npm install vue -g

批量下载

从网上下载某些代码，发现只有package.json文件，没有node_modules文件夹，这时我们需要通过命令重新下载这些js库
进入package.json所在的目录，输入:npm install
此时，npm会自动下载package.json中依赖的库

淘宝npm镜像(建议使用)

有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度

更换成淘宝的源
npm config set registry https://registry.npm.taobao.org 
– 配置后可通过下面方式来验证是否成功 
npm config get registry 

npm install cnpm@7.1.0 -g

Snipaste_2024-04-29_12-37-54.png
安装后，可以查看cnmp的版本：cnmp -v
使用cnmp：

cnpm install -g 需要下载的js库
例如：
 cnpm install -g axios

Webpack

介绍

webpack是一个现代js应用程序的静态模块打包器
可以看成maven中的package

安装

全局安装
cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g
安装后能查看版本号
webpack -v
webpack-cli -v

快速入门

方式一：webpack原始方式

  1. 新建文件夹work3，在创建src文件夹，创建bar.js
exports.info=function(str){
document.write(str);
}
  1. src下创建logic.ic
exports.add=function(a,b){
	return a+b;
	}
  1. src下创建main.js
var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

说明：上述具有多个js文件，那么我们在实际开发中使用的时候会导入过多的js文件，使用起来不方便，那么可以将上述多个js文件打包成一个js文件

  1. 创建配置文件webpack.config.js，该文件与src处于同级目录
var path = require("path"); // 导入 node.js 中专门操作路径的模块，固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {
    //执行webpack命令的时候,读取入口main.js，由于main.js关联bar.js和logic.js，所以会将这三个js文件合并到一个js文件中
    entry: './src/main.js', // 打包入口文件的路径//输出文件位置
    output: {  //__dirname表示当前工程目录
  			path: path.resolve(__dirname, './dist'),  // 输出文件的存放路径
  			filename: 'bundle.js'  // 输出文件的名称
  			}	
  		};

以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

  1. 执行编译命令

webpack

  1. 创建index.html,引用bundle.js
<!doctype html>
<html>
  <head> </head>
      <body>  
         <script src="dist/bundle.js"></script>
	 </body>
 </html>

创建完毕，完整目录如下：
Snipaste_2024-04-29_14-09-53.png
测试调用index.html，会发现有内容输出：Hello world!300

方式二：基于NPM方式

  1. 新建项目空白目录，并运行npm init –y 命令，初始化包管理配置文件package.json
  2. 新建 src 源代码目录,并且把 bar.js 和 logic.js 和 main.js 文件复制到 src目录
  3. 创建index.html ,引用bundle.js
  4. 运行 npm install webpack webpack-cli 命令，安装webpack相关的包
    1. 如果全局安装过webpack和webpack-cli命令，可以跳过此步骤
  5. 在项目根目录中，创建名为webpack.config.js 的 webpack配置文件
var path = require("path");
module.exports = {	
	mode: 'development', // mode 用来指定构建模式development、production	
	entry: './src/main.js',
	output:{
	path: path.resolve(__dirname, './dist'),	
	filename: 'bundle.js'	
		}
	};
  1. 在 package.json 配置文件中的scripts节点下，新增dev脚本如下：

{
“name”: “work4”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack” //script 节点下的脚本，可以通过 npm run 执行
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

完整代码结构：
Snipaste_2024-04-29_14-15-30.png
在终端中运行 npm run dev 命令，启动webpack进行项目打包。
Snipaste_2024-04-29_14-16-17.png
注意是在package.json 包下运行该命令
点击index.html文件查看结果, 会发现有内容输出：`Hello world!300
说明：使用npm命令运行的原因是后期使用webpack命令的时候，命令会很多，不仅仅只有webpack几个字母，不好记，而使用：npm run dev命令执行无论webpack命令有多少都会执行。

webpack-dev-server 开发服务器

介绍

每次修改源码时都要进行重新打包，才能看到最新的效果，且在实际开发中，打包非常费时
解决方案：我们可以开启一个开发服务器webpack-dev-server，在电脑内存中打包，缓存一些已经打包过的内容，只重新打包修改的文件(热跟新)

使用

在work3下没有package.json文件，需要在模块下初始化命令：npm init即可

  1. 修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下：

{
“name”: “work4”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack-dev-server”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“webpack”: “^4.41.5”,
“webpack-cli”: “^3.3.12”
},
“devDependencies”: {
“webpack-dev-server”: “^3.11.2”
}
}
//devDependencies是开发时依赖，上线不依赖

然后运行 cnpm install 指令,安装webpack,webpack-cli 和 webpack-dev-server(全局可以省略)

  1. 修改 webpack.config.js 文件,添加 devServer

var path = require(“path”);
module.exports = {
mode: ‘development’, // mode 用来指定构建模式development、production
entry: ‘./src/main.js’,
devServer: {
port: 8099,// 服务器占用8099端口
open: true // 自动打开浏览器
},
output: {
path: path.resolve(__dirname, ‘./dist’),
filename: ‘bundle.js’
}
};

  1. 删除之前的dist目录
  2. 将 index.html 中，script 脚本的引用路径

<!doctype html>
<html>
<head>
</head>
<body>

<script src=“/bundle.js”></script>
</body>
</html>

  1. 运行 npm run dev 命令
  2. 在浏览器中访问 http://localhost:8099地址，查看自动打包效果

webpack-dev-server 会启动一个实时打包的 http 服务器
webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，基于内存

Vue-cli(重点)

介绍

vue-cli也叫vue脚手架，vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速创建一个基于vue项目的基础架子
脚手架：搭建好的一个架子，我们可以在架子上进行开发
好处：可以直接用，零配置，基于webpack、webpack-dev-server

快速入门(前端工程师做)

  1. 切换到当前项目目录
  2. 在当前项目目录执行下面的命令
    :::tips
    cnpm install vue-cli -g # 只需安装一次， 可以使用cnpm安装,通过

# Windows使用 vue init 的运行效果将会跟 vue-cli@2.x 相同
# work5是模块名字
vue init webpack work5

#Mac 使用
sudo vue init webpack vuedemo

##查看vue版本
vue --version
:::
如果安装vue脚手架之后, vue init命令无法识别, 可以尝试在vscode在任务管理器中关闭进程,再启动
image.png
image.png
注意：在vue脚手架中文件后缀名是.vue称为组件。App.vue称为跟组件

  1. 然后到模块目录下运行(cd 模块名)
  2. 执行命令：npm run dev
  3. 浏览器访问 http://localhost:8080/#/

退出服务器，俩下ctrl+c

基础介绍

服务器设置

image.png
image.png

目录分析

image.png

  1. index.html是页面, 不用动,提供一个最基础的页面

image.png

  1. src/main.js是入口程序, 不用动, 渲染了App.vue组件

image.png

  1. src/App.vue是根组件, 默认有很多的内容，可以编辑

image.png

    <template>
  		书写html标签的，只能书写一个根标签
  		<div>
  		
  		</div>
	</template>

    <script>
		书写js代码的
      //书写vue代码
export default {
  data(){
    return {
      msg : "hello vue"
    }
  }
}
 /*
 	以后不用这样书写了
 	new Vue({
 		data(){
 			return {
 				msg:"hello vue"
 			}
 		}
 	});
 */
    </script>

    <style>
		书写css样式
    </style>

路由

前端的路由指的是路径和组件(.vue结尾的文件)的映射关系
image.png
image.png
注意：前端工程师会在src下面创建一个文件夹:views。存放自己创建的组件即以.vue结尾

练习

模拟网易云音乐

  1. 在根组件App.vue添加超链接

Snipaste_2024-04-29_18-38-37.png

  1. 在路由中配置访问的路径和组件的关系

Snipaste_2024-04-29_18-39-34.png

  1. 创建组件

Snipaste_2024-04-29_18-40-03.png

Element-UI

将element-ui组件添加到vue脚手架中

  1. 在当前工程下(work5)安装element
    :::tips
    cnpm i element-ui -S
    :::

  2. 在main.js文件中引入element内容

Snipaste_2024-04-29_18-43-20.png

综合案例

前后端分离介绍

业务分离 : 界面交互业务归前端, 数据逻辑管理归后端
开发分离 : 前端开发前端项目, 后端开发后端项目
部署分离 : 前端项目部署在服务器A上, 后端项目部署在服务器B上

后端项目环境搭建

  1. 先修改项目中的配置文件，改成自己的数据库账号密码
  2. 在dos窗口使用java -jar xxx.jar启动

前端项目环境搭建

  1. 先将文件复制到vscode下，然后打开终端，执行 cnpm i
  2. 然后执行 npm run dev命令启动服务器
  3. 用浏览器访问项目

前端项目分析

  1. config/index.js文件
  2. main.js文件
  3. App.vue根组件
  4. router/index.js
  5. vide/xx.vue

后端项目

后面学习

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

redis中的集群模式

redis中的集群模式

主从复制、主从同步(解决高并发读的问题) 主从同步原理&#xff1a; 1.全量同步 slave&#xff08;从节点&#xff09;每次请求数据同步会带两个参数&#xff1a;replid和offset。 replid&#xff1a;第一次请求同步时&#xff0c;replid和master的replid不一样&#xff0c;这…
阅读更多...
公共交通无障碍设施：科技翅膀助力盲人出行新飞跃

公共交通无障碍设施：科技翅膀助力盲人出行新飞跃

在城市的脉络中&#xff0c;公共交通扮演着连接每一个角落的重要角色。然而&#xff0c;对于视力受限的盲人朋友而言&#xff0c;这幅繁忙而复杂的交通网络往往隐藏着诸多不易察觉的障碍。值得庆幸的是&#xff0c;随着公共交通无障碍设施的不断完善&#xff0c;以及高科技辅助…
阅读更多...
Akamai 分布式“云+边缘”，打造下一代数字化基座

Akamai 分布式“云+边缘”，打造下一代数字化基座

当下&#xff0c;数字化基础设施正逐步向分布式部署演化&#xff0c;云计算与边缘计算正在成为两大技术支柱。Gartner 数据显示&#xff0c;云服务占 IT 整体支出比例连年上涨&#xff0c;在过去一年已增长至12.1%&#xff1b;IDC 报告显示&#xff0c;截至2021年已有超过500亿…
阅读更多...
面试官：如何实现文件上传？说说你的思路

面试官：如何实现文件上传？说说你的思路

一、是什么 文件上传在日常开发中应用很广泛&#xff0c;我们发微博、发微信朋友圈都会用到了图片上传功能 因为浏览器限制&#xff0c;浏览器不能直接操作文件系统的&#xff0c;需要通过浏览器所暴露出来的统一接口&#xff0c;由用户主动授权发起来访问文件动作&#xff0…
阅读更多...
电商技术揭秘三十五：智能风控功能架构浅析

电商技术揭秘三十五：智能风控功能架构浅析

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘二十八&#xff1a;安全与合规性保障 电商技术揭秘二十九&#xff1a;电商法律合规浅析 电商技术揭秘三十&#xff1a;知识产权保…
阅读更多...
Elasticsearch中对文章进行索引和查重

Elasticsearch中对文章进行索引和查重

解决思路 要在Elasticsearch中对文章进行索引和查重&#xff0c;可以按照以下步骤操作&#xff1a; 安装Elasticsearch并启动服务。 安装Python的Elasticsearch客户端库&#xff0c;可以使用pip install elasticsearch命令进行安装。 编写Python代码&#xff0c;使用Elastic…
阅读更多...
【Elasticsearch】安装配置与使用

【Elasticsearch】安装配置与使用

1 前期准备 1.1 环境准备 麒麟ARM 64位操作系统 1.2 安装包准备 Elasticsearch下载地址: https://www.elastic.co/cn/downloads/elasticsearch 2 部署elasticsearch 2.1 创建es专用用户 注意&#xff1a;ES不能使用root用户来启动&#xff0c;必须使用普通用户来安装启…
阅读更多...
QT爱发函，介绍一下平替QT的八大桌面开发框架。

QT爱发函，介绍一下平替QT的八大桌面开发框架。

Qt是一款跨平台的C应用程序开发框架&#xff0c;它提供了丰富的库和工具&#xff0c;可以用于开发图形用户界面、嵌入式系统、移动应用等。Qt拥有商业版和开源版两种许可证&#xff0c;商业版需要支付授权费用&#xff0c;而开源版则可以免费使用。 对于替代Qt的框架&#xff0…
阅读更多...
STM32使用PWM驱动直流电机

STM32使用PWM驱动直流电机

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. 直流电机和驱动简介 2. 驱动电路原理 3. 代码实现 3.1 PWM.c 3.2 PWM.h 3.3 MOTOR.c 3.4 MOTOR.h 3.5 main.c 3.6 完整工程文件 PWM和OC输出比较详解&#xff1a; STM32定时器的OC比较和PW…
阅读更多...
2024.4.23 LoadRunner 测试工具详解 —— VUG

2024.4.23 LoadRunner 测试工具详解 —— VUG

目录 引言 LoadRunner 三大组件之间的关系 LoadRunner 脚本录制 启动并访问 WebTours 脚本录制 编译 运行&#xff08;回放&#xff09; LoadRunner 脚本加强 事务插入 插入集合点 插入检查点 参数化 ​编辑 打印日志 引言 问题&#xff1a; 此处为啥选择使用 Lo…
阅读更多...
西门子：HMI小游戏-灰太狼与喜羊羊

西门子：HMI小游戏-灰太狼与喜羊羊

DB块&#xff1a; HMI界面&#xff1a; 实际视频&#xff1a; 抓羊小游戏
阅读更多...
第三节课，功能2：开发后端用户的管理接口5min(用户的查询/状态更改)【4】

第三节课，功能2：开发后端用户的管理接口5min(用户的查询/状态更改)【4】

一、代码任务 【录个屏】 二、写代码 2.1 代码文件位置 2.2 代码如下&#xff1a; 2.3 官方文档&#xff1a; 网址&#xff1a; 逻辑删除 | MyBatis-Plus (baomidou.com) 三、代码有bug&#xff0c;没有鉴权&#xff0c;表里添加一个字段。role 管理员 3.1 判断操作的人&am…
阅读更多...
SQL事前巡检插件

SQL事前巡检插件

背景: 事故频发 •在工作过程中每年都会看到SQL问题引发的线上问题&#xff0c;一条有问题的SQL足以拖垮整个数据库 不易发觉 •对于SQL性能问题测试在预发环境不易发现&#xff08;数据量小&#xff09; •SAAS系统隔离字段在SQL条件中遗漏&#xff0c;造成越权风险 •业…
阅读更多...
C语言：文件操作（中）

C语言：文件操作（中）

片头 嗨&#xff01;小伙伴们&#xff0c;大家好&#xff01;在上一篇中&#xff0c;我们学习了C语言&#xff1a;文件操作&#xff08;上&#xff09;&#xff0c;在这一篇中&#xff0c;我们将继续学习文件操作&#xff0c;准备好了吗&#xff1f;Ready Go ! ! ! 文件的顺序…
阅读更多...
通过window的bash创建vue架构的项目文件，如何不用下载即可引用想要的图片

通过window的bash创建vue架构的项目文件，如何不用下载即可引用想要的图片

winr 通过window的bash创建vue架构的项目文件 先创建项目文件 用vscode打开并下载依赖 关于安装包版本小知识补充 例如 “^5.2.0”第一位是大版本号&#xff0c;第二位是小版本号&#xff0c;最后一位是补丁号 “^”尖括号指限定了只能下载大版本号为5的版本 “~4.17.21” …
阅读更多...
ssm092基于Tomcat技术的车库智能管理平台+jsp

ssm092基于Tomcat技术的车库智能管理平台+jsp

车库智能管理平台设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本车库智能管理平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短…
阅读更多...
[机器学习系列]深入解析K-Means聚类算法：理论、实践与优化

[机器学习系列]深入解析K-Means聚类算法：理论、实践与优化

目录 一、KMeans (一)Kmeans简介 (二)Kmeans作用和优点 (三)Kmeans局限和缺点 (四)Kmeans步骤 (五)如何选取最佳的K值的三种方法 (六)手肘法和目标函数的变化两种确定K值方法的区别 (七)如何选取第一次迭代的K个类中心------KMeans方法 (八)KMeans的常用参数介绍 二、…
阅读更多...
CSS + HTML

CSS + HTML

目录 一.CSS&#xff08;层叠样式表&#xff09; 二. CSS 引入方式 三.选择器 3.1 标签选择器 3.2 类选择器 3.3 id选择器 3.4 通配符选择器 3.5 画盒子 四.文字控制属性 4.1字体大小 4.2字体粗细 4.3 字体倾斜 4.4行高 4.5行高--垂直居中 4.6 字体族 4.7 字体复…
阅读更多...
智能优化算法及 MATLAB 实现（书籍推荐）

智能优化算法及 MATLAB 实现（书籍推荐）

智能优化算法及 MATLAB 实现&#xff08;书籍推荐&#xff09; 介绍前言目录第1章 粒子群优化算法原理及其MATLAB实现第2章 哈里斯鹰优化算法原理及其MATLAB实现第3章 沙丘猫群优化算法原理及其MATLAB实现第4章 鲸鱼优化算法原理及其MATLAB实现第5章 大猩猩部队优化算法原理及其…
阅读更多...
算法设计与分析 3.2 牛顿法及改进、迭代法、矩阵谱半径、雅可比迭代、高斯迭代

算法设计与分析 3.2 牛顿法及改进、迭代法、矩阵谱半径、雅可比迭代、高斯迭代

思考题1 改进cosx&#xff1f;优化算法 关键点在于cos计算过于麻烦&#xff0c;而每次都要求sinx的值 故直接简化为cosx的导数 -sinx 即&#xff1a; 原&#xff1a;//double daoshu(double x) { // return 18 * x - cos(x); //} 改&#xff1a;double daoshu(double x) {retu…
阅读更多...
最新文章

Copyright @ 2022~2023