超详细的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

后端项目

后面学习

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

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

相关文章

GPU并行计算CUDA

GPU并行计算CUDA

一、CUDA 和 GPU 简介 CUDA 是显卡厂商 NVIDIA 推出的运算平台&#xff0c;是一种通用并行计算架构&#xff0c;使得 GPU 能够解决复杂的计算问题。开发人员可以使用 C 语言来为 CUDA 架构编写程序&#xff0c;可以在支持 CUDA 的处理器上以超高性能运行&#xff0c;CUDA 3.0 …
阅读更多...
【Docker学习】docker version查看版本信息

【Docker学习】docker version查看版本信息

就像很多应用一样&#xff0c;docker也使用version来查看版本信息。但因为docker包含有不少独立组件&#xff0c;version的作用范围会更广一些。 用法1&#xff1a; docker --version 描述&#xff1a; 输出安装的Docker CLI 的版本号。关于Docker CLI&#xff0c;请访问。 实操…
阅读更多...
ROS2专栏（三） | 理解ROS2的动作

ROS2专栏（三） | 理解ROS2的动作

​ 1. 创建一个动作 目标&#xff1a; 在ROS 2软件包中定义一个动作。 1.1 新建包 设置一个 workspace 并创建一个名为 action_tutorials_interfaces 的包&#xff1a; mkdir -p ros2_ws/src #you can reuse existing workspace with this naming convention cd ros2_ws/s…
阅读更多...
【C++】：类和对象(下)

【C++】：类和对象(下)

目录 一&#xff0c;再谈构造函数1.初始化列表2. 隐式类型转换的过程及其优化3. 隐式类型转换的使用4. explcit关键字5. 单参数和多参数构造函数的隐式类型转换 二&#xff0c;static成员1.静态成员变量2.静态成员函数3. static 成员的应用 三&#xff0c;友元3.1 友元函数3.2 …
阅读更多...
SQL注入漏洞扫描---sqlmap

SQL注入漏洞扫描---sqlmap

what SQLMap是一款先进的自动执行SQL注入的审计工具。当给定一个URL时&#xff0c;SQLMap会执行以下操作&#xff1a; 判断可注入的参数。判断可以用哪种SQL注入技术来注入。识别出目标使用哪种数据库。根据用户的选择&#xff0c;读取哪些数据库中的数据。 更详细语法请参考…
阅读更多...
Mac 安装 JDK21 流程

Mac 安装 JDK21 流程

一、下载JDK21 访问Oracle官方网站或选择OpenJDK作为替代品。Oracle JDK从11版本开始是商业的&#xff0c;可能需要支付费用。OpenJDK是一个免费开源选项。 Oracle JDK官方网站&#xff1a;Oracle JDK Downloads OpenJDK官方网站&#xff1a;OpenJDK Downloads 这里以JDK21为…
阅读更多...
Nginx实现端口转发与负载均衡配置

Nginx实现端口转发与负载均衡配置

前言&#xff1a;当我们的软件体系结构较为庞大的时候&#xff0c;访问量往往是巨大的&#xff0c;所以我们这里可以使用nginx的均衡负载 一、配置nginx实现端口转发 本地tomcat服务端口为8082 本地nginx端口为8080 目的&#xff1a;将nginx的8080转发到tomcat的8082端口上…
阅读更多...
如何从Mac电脑恢复任何删除的视频

如何从Mac电脑恢复任何删除的视频

Microsoft Office是包括Mac用户在内的人们在世界各地创建文档时使用的最佳软件之一。该软件允许您创建任何类型的文件&#xff0c;如演示文稿、帐户文件和书面文件。您可以使用 MS Office 来完成。所有Microsoft文档都可以在Mac上使用。大多数情况下&#xff0c;您处理文档&…
阅读更多...
网络安全审计

网络安全审计

一、什么叫网络安全审计 网络安全审计是按照一定的安全策略&#xff0c;利用记录、系统活动和用户活动等信息&#xff0c;检查、审查和检验操作时间的环境及活动&#xff0c;从而发现系统漏洞、入侵行为或改善系统性能的过程&#xff0c;它是提高系统安全性的重要手段。 系统…
阅读更多...
springboot整合mybatis配置多数据源（mysql/oracle）

springboot整合mybatis配置多数据源（mysql/oracle）

目录 前言导入依赖坐标创建mysql/oracle数据源配置类MySQLDataSourceConfigOracleDataSourceConfig application.yml配置文件配置mysql/oracle数据源编写Mapper接口编写Book实体类编写测试类 前言 springboot整合mybatis配置多数据源&#xff0c;可以都是mysql数据源&#xff…
阅读更多...
2024 年 16 款最佳屏幕录制软件榜单

2024 年 16 款最佳屏幕录制软件榜单

屏幕录制软件是一个经常被忽视的方便工具。 无论您是想要制作教程的内容创建者还是想要录制演示文稿的业务人员&#xff0c;屏幕录像机都是必须的&#xff01;但是&#xff0c;在使用您能找到的第一台录音机之前&#xff0c;我们建议您花些时间找到符合您需求的录音机。有这么…
阅读更多...
pytorch笔记：ModuleDict

pytorch笔记：ModuleDict

1 介绍 在 PyTorch 中&#xff0c;nn.ModuleDict 是一个方便的容器&#xff0c;用于存储一组子模块&#xff08;即 nn.Module 对象&#xff09;的字典这个容器主要用于动态地管理多个模块&#xff0c;并通过键来访问它们&#xff0c;类似于 Python 的字典 2 特点 组织性 nn…
阅读更多...
【Unity】在空物体上实现 IPointerClickHandler 不起作用

【Unity】在空物体上实现 IPointerClickHandler 不起作用

感谢Unity接口IPointerClickHandler使用说明_哔哩哔哩_bilibiliUnity接口IPointerClickHandler使用说明, 视频播放量 197、弹幕量 0、点赞数 3、投硬币枚数 2、收藏人数 2、转发人数 0, 视频作者 游戏创作大陆, 作者简介 &#xff0c;相关视频&#xff1a;在Unity多场景同时编辑…
阅读更多...
嵌入式开发四：STM32 基础知识入门

嵌入式开发四：STM32 基础知识入门

为方便更好的学习STM32单片机&#xff0c;本篇博客主要总结STM32的入门基础知识&#xff0c;重点在于理解寄存器以及存储器映射和寄存器映射&#xff0c;深刻体会STM32是如何组织和管理庞大的寄存器&#xff0c;从而提高开发效率的&#xff0c;为后面的基于标准库的开发做好铺垫…
阅读更多...
专业渗透测试 Phpsploit-Framework（PSF）框架软件小白入门教程（四）

专业渗透测试 Phpsploit-Framework（PSF）框架软件小白入门教程（四）

本系列课程&#xff0c;将重点讲解Phpsploit-Framework框架软件的基础使用&#xff01; 本文章仅提供学习&#xff0c;切勿将其用于不法手段&#xff01; 继续接上一篇文章内容&#xff0c;讲述如何进行Phpsploit-Framework软件的基础使用和二次开发。 当我们牢记登陆账户、…
阅读更多...
浅谈ps/2键盘

浅谈ps/2键盘

文章目录 说明基础知识操作系统中断类型工作机制优点应用 CPU对IO设备的轮询机制轮询机制的工作原理轮询机制的特点轮询机制的优、缺点与中断机制的对比 N-Key Roller&#xff08;全键无冲&#xff09;应用领域实现原理技术限制 PS/2接口简介USB设备&PS/2设备的工作机制PS/…
阅读更多...
11个2024年热门的AI编码助手

11个2024年热门的AI编码助手

大家好&#xff0c;人工智能&#xff08;AI&#xff09;领域的大型语言模型&#xff08;LLMs&#xff09;已经逐渐发展成熟&#xff0c;并且深入到了我们日常的工作当中。在众多AI应用中&#xff0c;编码助手尤为突出&#xff0c;是开发人员编写更高效、准确无误代码的必备辅助…
阅读更多...
预训练模型介绍

预训练模型介绍

一、什么是GPT GPT 是由人工智能研究实验室 OpenAI 在2022年11月30日发布的全新聊天机器人模型, 一款人工智能技术驱动的自然语言处理工具 它能够通过学习和理解人类的语言来进行对话, 还能根据聊天的上下文进行互动,能完成撰写邮件、视频脚本、文案、翻译、代码等任务 二、 为…
阅读更多...
STM32单片机实战开发笔记-EXIT外部中断检测

STM32单片机实战开发笔记-EXIT外部中断检测

嵌入式单片机开发实战例程合集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/11av8rV45dtHO0EHf8e_Q0Q?pwd28ab 提取码&#xff1a;28ab EXIT模块测试 功能描述 外部中断/事件控制器由19个产生事件/中断要求的边沿检测器组成。每个输入线可以独立地配置输入类型&a…
阅读更多...
软件测试（实验五）——Jmeter的使用

软件测试（实验五）——Jmeter的使用

目录 实验目的 一、使用JMeter演示取样器、监听器、配置元件、断言的使用&#xff1b; 1、取样器 2、监听器 3、配置元件的使用 ① 用户定义的变量 ②HTTP信息头管理器 ③HTTP请求默认值 ④CSV数据文件设置 4、断言 ①响应断言 ②JSON断言 ③断言持续时间 二、使用…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023