Vue脚手架基础

Vue脚手架基础


NodeJS(轻量高效)--》相当于Java的jdk

Node.js是基于Chrome浏览器引擎的JavaScript运行环境,所以它的作用就相当于是一个浏览器,解析HTML,css,JS代码

随着 Node.js 的出现,JavaScript 在服务器端的应⽤逐渐增多,为了让 Node.js 的代码更好维护,就必须要制定⼀种 Node.js 环境下的模块化规范

导出数据有两种⽅式

  • 第⼀种⽅式: module.exports = value

  • 第⼆种⽅式: exports.name = value

    javascript 复制代码
    //导出函数
    exports.add=function(a,b){
        return a+b;
    }

    使⽤内置的require 函数进⾏导⼊数据

javascript 复制代码
//导入函数
let test=require('./demo2_01.js');
console.log(test.add(10,20));

Node JS的包管理器npm(全球最大的开源生态系统)

1、通过npm init进行初始化操作

初始化出来的package.json先相当于是mavenpom文件

用于存放工程的依赖文件

2、通过 npm install 要安装的框架名称进行本地安装相关模块

3、通过**npm root -g**查看本地电脑存放依赖的全局位置

4、通过 npm install 要安装的框架名称 -g 进行全局安装相关模块

5、通过npm run dev来运行工程

6、通过npm run build来编译工程


Webpack(静态模块打包器)-->前端打包

1、进行语法转换

2、HTML,CSS,JS代码进行打包压缩合并

3、webpack可以在开发期间提供一个开发服务器


--》相当于maven中打成war包类似(前端项目也是打包在上线)


基于npm方式进行打包

npm run dev

可以将dev中的webpack改为webpack-dev_server(开发服务器)

这样子进行配置了之后那么对应的前端的打包就直接在内存中,而不是每次都需要去硬盘中进行修改



Vue-cli脚手架


重点:

1、启动项目:

npm run dev

2、安装当前项目所需要的所有依赖:

npm install(npm i)


vue-cli是Vue的一个基础框架,帮助我们快速搭建一个Vue的项目基础架子

~开箱即用

~零配置

~基于webpack,webpack-dev-server


安装脚手架到全局位置

npm install vue-cli -g


项目目录(vue脚手架中后缀名为.vue的称为组件,APP.vue为根组件)

主要:

src--项目核心文件(我们所写的代码都放在这个文件夹下)

assets-- 静态资源(样式类文件,如css,less,sass,以及一些外部js文件)

components-- 公共组件

router--路由(配置项目路由)

App.vue --根组件

mainjs-- 入口文件


vue 项目的创建

官方样例:

快速上手 | Vue.js

创建一个项目:

npm create vue@latest

vue 复制代码
<template>
    <div>
      书写HTML代码的只能书写一个根标签
    </div>
</template>
<script>
	书写js代码的
</script>
<style>
	书写CSS代码的
</style>

路由(在Vue脚手架中路由表示的是浏览器地址栏和组件的映射关系)
相关推荐
用户79747611273几秒前
Mysql RR事务隔离级别引发的生产Bug,你中招了吗?
前端
Mintopia1 分钟前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
JarvanMo11 分钟前
Dart & Flutter DevTools 扩展
前端
yuko093113 分钟前
【手机验证码】手机号格式化光标异常问题
前端
原生高钙13 分钟前
高性能前端埋点上报系统的架构与实现
前端·面试
水痕0119 分钟前
nginx一个域名下部署多套前端项目
运维·前端·nginx
Anyin21 分钟前
Spring AI Alibaba - DeepResearch 前端主体 UI 构建
前端·ai编程·trae
非优秀程序员22 分钟前
8 个提升开发者效率的小众 AI 项目
前端·人工智能·后端
河畔一角29 分钟前
一些感悟
前端
excel35 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端