超详细的Vue脚手架

news2024/11/25 2:53:07

文章目录

  • 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.coloradmin.cn/o/1634669.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

黑马点评(二)--商户查询缓存

黑马点评(二)--商户查询缓存

目录 1.缓存更新策略1.1内存淘汰1.2超时剔除1.3主动更新 2.实现缓存和数据库的双写一致2.1Controller2.2Service2.3思路讲解 3.解决缓存穿透问题3.1出现原因3.2解决方案3.3代码实现 4.解决缓存雪崩问题4.1出现原因4.2解决方案4.3代码实现 5.解决缓存击穿问题5.1出现原因5.2解决…
阅读更多...
Spring Cloud Security Oauth2 授权码模式

Spring Cloud Security Oauth2 授权码模式

授权码存取—内存方式 获取Code Bisic认证 WebSecurityConfig 配置 Basic Auth认证 登录 数据库建表 授权码存储方式-数据库 Beanpublic AuthorizationCodeServices authorizationCodeServices() {return new JdbcAuthorizationCodeServices(dataSource);}问题 OAuth2 授…
阅读更多...
rocketmq dashboard控制台中topic状态无法展示

rocketmq dashboard控制台中topic状态无法展示

现象 在使用rocketmq控制台查看topic状态和订阅状态时&#xff0c;出现错误和没有信息的情况。 原因 rocketmq控制台版本问题&#xff0c;最新版本为1.0.1&#xff0c;支持rocketmq5版本&#xff0c;如果使用rocketmq4版本的服务无法兼容对应的数据。同理1.0.0版本也无法兼容ro…
阅读更多...
C++ 抽象机制

C++ 抽象机制

抽象机制 1. 虚函数 使用关键字virtual 声明的函数&#xff0c;意思是可能随后在其派生类中重新定义。 纯虚函数 在声明的末尾使用0 的函数&#xff0c;说明是纯虚函数。 抽象类 含有纯虚函数多的类称为抽象类(abstract class). 多态类型 如果一个类负责为其他一些类提供接…
阅读更多...
C语言例题31：在屏幕上显示一个菱形

C语言例题31：在屏幕上显示一个菱形

题目要求&#xff1a;在屏幕上显示一个菱形 #include <stdio.h>void main() {int i, j;int x;printf("输入菱形行数(3以上的奇数&#xff09;&#xff1a;");scanf("%d", &x);//显示菱形上面的大三角形for (i 1; i < (x 1) / 2; i) {for (…
阅读更多...
重磅合作：OpenAI将金融时报的数据引入ChatGPT｜TodayAI

重磅合作：OpenAI将金融时报的数据引入ChatGPT｜TodayAI

在今天的重磅公告中&#xff0c;金融时报&#xff08;FT&#xff09;与OpenAI宣布建立了一项战略合作伙伴关系和许可协议。这一举措标志着金融时报将其卓越新闻内容引入ChatGPT平台&#xff0c;同时也为FT读者带来前所未有的AI新体验。 这项合作不仅让ChatGPT用户在查询时能够…
阅读更多...
Oracle 表分区

Oracle 表分区

1.概述 分区表就是将表在物理存储层面分成多个小的片段&#xff0c;这些片段即称为分区&#xff0c;每个分区保存表的一部分数据&#xff0c;表的分区对上层应用是完全透明的&#xff0c;从应用的角度来看&#xff0c;表在逻辑上依然是一个整体。 目的&#xff1a;提高大表的查…
阅读更多...
redis中缓存穿透问题

redis中缓存穿透问题

缓存穿透 缓存穿透问题&#xff1a; 一般请求来到后端&#xff0c;都是先从缓存中查找数据&#xff0c;如果缓存中找不到&#xff0c;才会去数据库中查询数据。 而缓存穿透就是基于这一点&#xff0c;不断发送请求查询不存在的数据&#xff0c;从而使数据库压力过大&#xff…
阅读更多...
自然语言处理 (NLP) 和文本分析

自然语言处理 (NLP) 和文本分析

自然语言处理 (NLP) 和文本分析&#xff1a;NLP 在很多领域都有着广泛的应用&#xff0c;如智能助手、语言翻译、舆情分析等。热门问题包括情感分析、命名实体识别、文本生成等。 让我们一起来详细举例子的分析讲解一下自然语言处理&#xff08;NLP&#xff09;和文本分析的应用…
阅读更多...
Java对接高德api搜索POI 2.0 关键字搜索

Java对接高德api搜索POI 2.0 关键字搜索

目录 一、注册账号 二、搜索小demo 1.首先要引入依赖 2. 然后查看打印结果即可 三、搜索接口代码 1.引入依赖 2.yml配置 2.Controller 3.静态工具类 四、运行测试 一、注册账号 高德开放平台 | 高德地图API 注册高德开发者&#xff1b;去控制台创建应用&#xff…
阅读更多...
使用 ArcGIS 对洪水预测进行建模

使用 ArcGIS 对洪水预测进行建模

第一步 — 下载数据 所有数据均已包含在 Esri 提供的项目压缩文件中。我将创建一个名为“Stowe_Hydrology.gdb”的新地理数据库，在其中保存这些数据以及创建的所有后续图层。 1-0。斯托市边界 斯托城市边界是佛蒙特州地理信息中心提供的矢量要素类面。我将这一层称为“Stow…
阅读更多...
【Leetcode每日一题】 综合练习 - 找出所有子集的异或总和再求和（难度⭐）（68）

【Leetcode每日一题】 综合练习 - 找出所有子集的异或总和再求和（难度⭐）（68）

1. 题目解析 题目链接&#xff1a;1863. 找出所有子集的异或总和再求和 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 算法思路与实现 为了求解给定整数数组的所有子集并将其异或和相加&#xff0c;我们可以采用递…
阅读更多...
速成python

速成python

一个只会c的苦手来总结一下py的语法。没有其他语法基础的不建议看 1. 输入输出 print自带换行&#xff0c;可以写print("Hi", end"")取消换行 a input(你好:) # 默认是str print(type(a)) # 输出a的类型 a int(input()) # 或者a int(a) print(type(…
阅读更多...
大气污染扩散模型Calpuff技术应用

大气污染扩散模型Calpuff技术应用

目前&#xff0c;大气污染仍为我国亟待解决的环境问题。为了弄清大气污染物排放后对周围环境的影响&#xff0c;需要了解污染物的扩散规律。Calpuff模型是一种三维非稳态拉格朗日扩散模型&#xff0c;可有效地处理非稳态&#xff08;如&#xff0c;熏烟、环流、地形和海岸等&am…
阅读更多...
UE C++ 链表

UE C++ 链表

目录 概要单链表双向链表头插入尾插入中间插入删除查找 小结 概要 链表 简单说明&#xff0c;链表有单链表&#xff0c;双向链表&#xff0c;循环链表(本篇文章以UE c代码说明)。链表的操作&#xff0c;插入&#xff0c;删除&#xff0c;查找。插入&#xff0c;删除效率高&…
阅读更多...
【Redis | 第十篇】Redis与MySQL保证数据一致性（两种解决思路）

【Redis | 第十篇】Redis与MySQL保证数据一致性（两种解决思路）

文章目录 10.Redis和MySQL如何保证数据一致性10.1双写一致性问题10.2数据高度一致性10.3数据同步允许延时10.3.1中间件通知10.3.2延迟双删 10.Redis和MySQL如何保证数据一致性 10.1双写一致性问题 Redis作为缓存&#xff0c;它是如何与MySQL的数据保持同步的呢&#xff1f;特…
阅读更多...
泽攸科技无掩膜光刻机在MEMS压力传感器制造中的应用

泽攸科技无掩膜光刻机在MEMS压力传感器制造中的应用

在当今的科技快速发展时代&#xff0c;微电子机械系统&#xff08;MEMS&#xff09;技术已成为推动现代传感器技术革新的关键力量。MEMS压力传感器&#xff0c;作为其中的重要分支&#xff0c;广泛应用于生物医学、航空航天、汽车工业等多个领域。随着对传感器性能要求的不断提…
阅读更多...
网络工程专业考研的方向有哪些？

网络工程专业考研的方向有哪些？

前言 网络工程专业的学生在考研时可选择的专业或方向包括&#xff1a;物联网、计算机网络技术、信息安全、信息与通信工程等。 1&#xff09;物联网&#xff1a;“物联网就是物物相连的互联网”&#xff0c;有两层意思&#xff1a;第一&#xff0c;物联网的核心和基础仍然是互…
阅读更多...
【C++干货基地】探索C++模板的魅力：如何构建高性能、灵活且通用的代码库（文末送书）

【C++干货基地】探索C++模板的魅力：如何构建高性能、灵活且通用的代码库（文末送书）

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…
阅读更多...
2024.4.23 LoadRunner 测试工具详解 —— VUG

2024.4.23 LoadRunner 测试工具详解 —— VUG

目录 引言 LoadRunner 三大组件之间的关系 LoadRunner 脚本录制 启动并访问 WebTours 脚本录制 编译 运行&#xff08;回放&#xff09; LoadRunner 脚本加强 事务插入 插入集合点 插入检查点 参数化 ​编辑 打印日志 引言 问题&#xff1a; 此处为啥选择使用 Lo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023