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脚手架中路由表示的是浏览器地址栏和组件的映射关系)
相关推荐
杨进军8 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW23 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字29 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端