超详细的Vue脚手架

已于 2024-05-08 19:30:02 修改
阅读量1.4k 收藏 10
点赞数 8
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2024-04-29 19:47:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69266818/article/details/138323394
版权

文章目录


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

后端项目

后面学习

@Zeal
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Super-Mall:vue脚手架
03-06
超级卖场vue脚手架仿写购物街项目为了不给后台服务器增加压力，本项目不提供后台数据连接，如果需要，可在CSDN中私信，望理解 :slightly_smiling_face:项目设置npm install编译和热重装以进行开发npm run serve编译...
Vue-cli(vue脚手架)上万字总结，超详细教程
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
Vue脚手架的搭建（超详细教程）
m0_71088505的博客
07-20 574
第二步：cmd中切换到要创建项目的目录(我放在桌面cd desktop），然后使用命令创建项目；了解：balel=>写vue代码要写到ES6相关的js，最终要转成ES5，就要用到babel。进入选项，Vue版本用的几就选几，我这里用的Vue2就选择的第一个。eslint=>做语法检查的，检查js写的是否合理。第一步(仅第一次执行）: 全局安装@vue/cli。直接访问Local的地址即可，Network是给同局域网的其他人用的。目前脚手架最新版本是v5.0.8。
vue如何搭建脚手架，超详细
big_beer的博客
04-12 9637
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、安装node二、安装cnpm三、安装webpack四、安装vue-cli五、创建项目总结 前言 如何搭建vue脚手架 提示：以下是本篇文章正文内容，下面案例可供参考 一、安装node win+r输入cmd打开控制台窗口，输入：node -v检查是否安装node。 如果没有安装先去官网安装，安装地址：https://nodejs.org/en/ 二、安装cnpm （非必要），但是国内的话安装了会快很多。 输入命令安装：n
Vue CLI脚手架详细教程
年少不知曲中意,再听已是曲终人
05-18 3961
文章目录一、什么是CLI?二、 什么是Vue CLI ？三、 Vue CLI的优势四、 Vue CLI的安装1、环境准备2、安装脚手架3、第一个vue脚手架项目五、 在脚手架中使用axios1、安装axios2、在main.js中引入axios3、使用axios六、 Vue Cli脚手架项目部署1、在项目根目录中执行如下命令:2、打包之后当前项目中变化 一、什么是CLI? 命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通
Vue-cli（vue脚手架）超详细教程
Java修炼记
03-15 8919
前言 “脚手架”，可以方便我们快速的创建项目。自动化地为我们搭建一个项目框架。之前的一篇文章：“Vue.js 快速入门”中提到了 Vue-cli脚手架，那么这篇文章就来介绍一下~ 1. 什么是Vue-cli Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能 Vue cli 背后集成了现代化开发的诸多功能，通过简单的命令就可以完成 "零配置"的项目环境搭建 2. 安装Vue-cli步骤 在安装vue-cli前，要确认自
Vue脚手架项目
nhhtx的博客
12-18 1837
Vue脚手架(Vue CLI)是一个官方提供的命令行工具,用于快速搭建和管理Vue.js项目的开发环境。它提供了一套可配置的脚手架,帮助开发者初始化Vue项目,并集成了开发所需的工具和依赖项,包括构建工具、开发服务器、打包工具等。babel、webpack都集成在其中。这个也是我这段时间学到的，希望对大家有用，有写得不好的地方，也请大家多多见谅！最后，祝大家学习进步，快快乐乐度过每一天！
使用npm安装vue脚手架
Zsl9998的博客
07-26 7298
安装nodejs，通过使用nodejs中携带的npm来安装vue脚手架，以及如何配置脚手架，安装后更目录中的文件都是做什么的
Vue脚手架搭建
Fanbin168的专栏
12-25 1831
我们使用vue是建立在node的命令 第一步：安装node.js 安装完毕后查看版本号， node-v 出现版本号及表示安装成功，也可以查看npm版本 npm -v 第二步： node 切换到淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 第三步：安装vue客户端 vue cli的包名称由vue-cli改成了@vue/cli 如果你再以前已经安装了vue-cli 那么你需要先将老版本卸载。 ...
vue-cli（vue脚手架）超详细教程
热门推荐
YinXiaobo
12-14 6万+
之前整理的一篇 vue-cli 新手教程，出乎意料意外的达到了 9W+ 的点击量，诚惶诚恐，为了让更多小伙伴有更好的体验，所以特意整理了这个新版本的。 vue2是对新手很友好的MVVM框架，有完善的官方中文文档，阅读起来也非常容易理解，由浅入深，示例完整。同时官方也提供了一个开箱即用的 vue-cli 帮我们生成一个完整的项目框架。 vue.js 著名的全家桶系列, 包含了， vue-route...
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
08-28
主要给大家介绍了软玉利用webpack如何搭一个vue脚手架的相关资料，文中有超详细讲解和注释，对大家学习或者使用webpack具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
vue-cli脚手架.zip
07-06
666，好的不行，这个下载绝对无超所值，不下载的何画我就给下架了，我就自己用了。所以你们赶紧下载吧，互相照顾下吗
starter-cli:前端脚手架 vite vue3 element plus cli， 持续完善中。。
08-04
安装方法 ...执行 npm install npm install 后会自动编译 执行 npm link 让starter-cli在全局可以，接下来你就可以在任意目录愉快地使用命令行啦 ...执行命令starter-cli config set registry 你的仓库名 ...
Vue3选项式和组合式生命周期说明
最新发布
weixin_44072254的博客
05-16 399
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
前端Vue架构
weixin_45678402的博客
05-12 293
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
Vue.js的发展史（一）
2301_79683791的博客
05-15 504
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
根据地址栏url上key获取值
wwf1225的博客
05-10 264
/ 根据url上key获取值，key为参数名字，例如token。
用vue实现json模版编辑器
qq_44428688的博客
05-14 510
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
vue-cli(vue脚手架)超详细教程
08-30
Vue CLI（vue脚手架）是一个官方提供的对Vue.js开发的脚手架工具，通过它我们可以快速初始化一个基于Vue.js的项目。下面是一个超详细的Vue CLI教程，包括如何安装、创建项目、常用命令等。 1. 安装Node.js：首先确保已经安装了Node.js，去Node.js官网下载安装包，按照指引完成安装。 2. 安装Vue CLI：打开命令行工具（如终端、命令提示符等），运行以下命令安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建Vue项目：在命令行中进入你想要创建项目的目录，运行以下命令创建项目： ``` vue create project-name ``` 其中，`project-name`是你要创建的项目名称，可以根据需要自定义。 4. 选择项目配置：在创建项目的过程中，Vue CLI会让你选择一些项目配置，比如使用的包管理工具、需要的特性等，根据需要选择或者保持默认配置。 5. 运行项目：进入项目目录，运行以下命令启动项目： ``` cd project-name npm run serve ``` 6. 编写代码：打开项目目录，在`src`文件夹下可以看到`main.js`文件，这是项目的入口文件，可以在这里编写Vue代码。 7. 构建项目：完成代码编写后，运行以下命令构建项目： ``` npm run build ``` 这会生成一个可部署的静态网站文件放在`dist`目录下。 8. 常用命令： - `npm run serve`：启动开发服务器，实时编译和热重载。 - `npm run build`：构建生产环境的项目。 - `npm run lint`：检查和修复代码风格。 以上就是一个超详细的Vue CLI教程，希望能够帮到你入门Vue开发。如果想要进一步学习和掌握Vue CLI，建议查阅Vue CLI官方文档，了解更多详细信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Zeal

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值