超详细的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.mzph.cn/diannao/5128.shtml

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

相关文章

2024年第十五届蓝桥杯江苏省赛回顾

2024年第十五届蓝桥杯江苏省赛回顾

呜呜呜~~~ 我在考完了后感觉自己直接炸了&#xff1a;好多学到的算法都没有用上&#xff0c;几乎所有的题目都是暴力的。。。 最后十几分钟对于一道dp算法终于有思路了&#xff0c;但是。。匆匆忙忙之间就是没有调试出来。&#xff08;还是交了一道暴力[旋风狗头]直接哭死~~&…
阅读更多...
设计模式学习笔记 - 开源实战五（下）：总结Mybatis中用到的10种设计模式

设计模式学习笔记 - 开源实战五（下）：总结Mybatis中用到的10种设计模式

概述 本章再对 Mybatis 用到的设计模式做一个总结。它用到的设计模式也不少。有些前面章节已经经过了&#xff0c;有些则比较简单。 SqlSessionFactoryBuilder&#xff1a;为什么要用建造者模式来创建 SqlSessionFactory&#xff1f; 在《Mybatis如何权衡易用性、性能和灵活性…
阅读更多...
鸿蒙内核源码分析(汇编基础篇) | CPU在哪里打卡上班

鸿蒙内核源码分析(汇编基础篇) | CPU在哪里打卡上班

本篇通过拆解一段很简单的汇编代码来快速认识汇编&#xff0c;为读懂鸿蒙汇编打基础.系列篇后续将逐个剖析鸿蒙的汇编文件. 汇编很简单 第一&#xff1a; 要认定汇编语言一定是简单的&#xff0c;没有高深的东西&#xff0c;无非就是数据的搬来搬去&#xff0c;运行时数据主要…
阅读更多...
高等学校数字化校园平台介绍

高等学校数字化校园平台介绍

高等学校信息化建设已经进入到跨业务领域信息共享、建立全校统一集成的信息系统阶段&#xff0c;目标是实现整个学校的系统集成、信息共享与工作协同。因此&#xff0c;如何将众多应用系统中大量的信息进行科学、规范的定义和分类&#xff0c;使信息有序流通、保证信息的一致性…
阅读更多...
IP定位技术企业网络安全检测

IP定位技术企业网络安全检测

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;成为企业运营中不可忽视的一环。在众多网络安全技术中&#xff0c;IP定位技术以其独特的优势&#xff0c;为企业网络安全检测提供了强有力的支持。本文将深入探讨IP定位技术在企业网络安全检测中的应用及其…
阅读更多...
使用通义千问，识别需求文档中的输入输出信号存储到excel表格，完成对需求的初步分析

使用通义千问，识别需求文档中的输入输出信号存储到excel表格，完成对需求的初步分析

操作步骤如下&#xff1a; 第一步&#xff0c;提取需求的输入输出信号为json格式&#xff0c; 提示词如下&#xff1a; 车速自动闭锁 使能条件&#xff08;a&b&c&d&e&f&#xff09; a. 电源状态为 ON&#xff08;PowerMode ON&#xff09; b. 主驾门锁…
阅读更多...
idm下载速度慢解决办法 idm批量下载怎么用 idm优化下载速度 Internet Download Manager解决下载速度慢的方法教程

idm下载速度慢解决办法 idm批量下载怎么用 idm优化下载速度 Internet Download Manager解决下载速度慢的方法教程

IDM (Internet Download Manager)是一款兼容性大&#xff0c;支持多种语言的下载管理软件&#xff0c;它可以自动检测并下载网页上的内容&#xff0c;这正是这一优点&#xff0c;使得它受到了广大用户的喜爱。但是在下载的过程中&#xff0c;我们会遇到idm下载速度慢怎么回事&a…
阅读更多...
ubuntu搭建node私库Verdaccio

ubuntu搭建node私库Verdaccio

ubuntu搭建node私库Verdaccio Verdaccio 是一个轻量级的私有 npm 代理注册服务器&#xff0c;它是开源的&#xff0c;可以帮助你设置和维护企业内部的 npm 包的存储库。使用 Verdaccio 可以让你完全控制包的发布流程、依赖关系以及访问策略。这篇文章将指导你如何在 Ubuntu 系…
阅读更多...
【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;必须使用普通用户来安装启…
阅读更多...
【百度Apollo】探索自动驾驶：小白教学如何使用 Dreamview 播放数据包

【百度Apollo】探索自动驾驶：小白教学如何使用 Dreamview 播放数据包

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、Dreamview 简介二、使用 Dreamview 具体步骤步骤一&#xff1a;进入 Apollo Docker 环境步骤二&#xff…
阅读更多...
.net报错异常及常用功能处理总结（持续更新）

.net报错异常及常用功能处理总结（持续更新）

.net报错异常及常用功能处理总结---持续更新 1. WebApi dynamic传参解析结果中ValueKind Object处理方法问题描述方案1&#xff1a;(推荐&#xff0c;改动很小)方案2&#xff1a; 2.C# .net多层循环嵌套结构数据对象如何写对象动态属性赋值问题描述JavaScript动态属性赋值.net…
阅读更多...
初步认识Vscode

初步认识Vscode

4.26初步认识Vscode &#xff08;一&#xff09;快捷键的使用 1. 打开控制端 ctrl ~2. 结束终端 ctrl c3. 多行同时对齐输出 按住shift alt 光标多选4. 多行同时任意位置输出 按住alt 光标单点你想要输入的位置5. 代码太长了&#xff0c;想混行编辑 alt z6. 打开设置控制…
阅读更多...
记录一次大数据量接口优化过程

记录一次大数据量接口优化过程

问题描述 记录一次大数据量接口优化过程。最近在优化一个大数据量的接口&#xff0c;是提供给安卓端APP调用的&#xff0c;因为安卓端没做分批次获取&#xff0c;接口的数据量也比较大&#xff0c;因为加载速度超过一两分钟&#xff0c;所以导致接口超时的异常&#xff0c;要让…
阅读更多...
【网络原理】TCP协议的相关机制（确认应答、超时重传）

【网络原理】TCP协议的相关机制（确认应答、超时重传）

系列文章目录 【网络通信基础】网络中的常见基本概念 【网络编程】Java网络编程中的基本概念及实现UDP、TCP客户端服务器程序&#xff08;万字博文&#xff09; 【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制&#xff08;CRC算法、MD5算法&#xff09; 文章目…
阅读更多...
# 谷歌 Chrome 浏览器无法安装插件的解决方法

# 谷歌 Chrome 浏览器无法安装插件的解决方法

谷歌 Chrome 浏览器无法安装插件的解决方法 运用开发模式安装 安装步骤&#xff1a; 1、 将 XX.crx 插件的扩展名改成 .zip 或者 .rar 并解压到文件夹 XX 目录。 1&#xff09;如&#xff1a;下载的 前端框架 vue.js 插件 nhdogjmejiglipccpnnnanhbledajbpd-6.6.1-Crx4Chro…
阅读更多...
面试重点2：网页访问不了，从服务器层面如何排查

面试重点2：网页访问不了，从服务器层面如何排查

从服务器层面排查网页访问问题可以按照以下步骤进行&#xff1a; 1. 检查网络连接 确保服务器的网络连接正常&#xff0c;可以通过 ping 命令测试网络是否通畅&#xff0c;例如 ping www.example.com。 2. 排查 DNS 问题 如果访问域名无法解析&#xff0c;可能是 DNS 配置问…
阅读更多...
邦注科技即热式节能模温机 模温机的工作原理

邦注科技即热式节能模温机 模温机的工作原理

模温机是一种用于控制模具温度的设备&#xff0c;主要用于塑料注塑、压铸、橡胶成型等工艺中。 其工作原理主要包括以下几个步骤&#xff1a; 加热阶段&#xff1a; 当模具需要加热时&#xff0c;双温模温机会启动加热系统&#xff0c;将热传导油或热传导水加热至设定温度。加…
阅读更多...
Spring Cloud学习笔记（Hystrix）：execute，queue，observe，toObservable样例和特性

Spring Cloud学习笔记（Hystrix）：execute，queue，observe，toObservable样例和特性

这是本人学习的总结&#xff0c;主要学习资料如下 - 马士兵教育 1、Overview2、execute()2.1、Overview2.2、示例 3、queue()3.1、Overview3.2、示例 4、observe()4.1、Overview4.2、示例 5、toObservable()5.1、observe()和toObservable()的区别 1、Overview 我们知道Hystrix…
阅读更多...
HDFS架构

HDFS架构

HDFS 是一个主从 Master/Slave 架构一个 HDFS 集群包含一个 NameNode,这是一个 Master Server,用来管理文件系统的命名空间,以及协调客户端对文件的访问一个 HDFS 集群包含多个 DataNode,用来存储数据HDFS 会对外暴露一个文件系统命名空间,并允许用户数据以文件的形式进行存储在…
阅读更多...
iOS实现一个高性能的跑马灯

iOS实现一个高性能的跑马灯

效果图 该跑马灯完全通过CATextLayer 实现&#xff0c;轻量级&#xff0c;并且通过 系统的位移动画实现滚动效果&#xff0c;避免了使用displaylink造成的性能瓶颈&#xff0c;使用系统动画&#xff0c;系统自动做了很多性能优化&#xff0c;实现更好的性能&#xff0c;并使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023