Vue脚手架基础
NodeJS（轻量高效）–》相当于Java的jdk
Node.js是基于Chrome浏览器引擎的JavaScript运行环境，所以它的作用就相当于是一个浏览器，解析HTML，css，JS代码
随着 Node.js 的出现，JavaScript 在服务器端的应⽤逐渐增多，为了让 Node.js 的代码更好维护，就必须要制定⼀种 Node.js 环境下的模块化规范
导出数据有两种⽅式：
- 第⼀种⽅式： module.exports = value
- 第⼆种⽅式： exports.name = value
使⽤内置的//导出函数 exports.add=function(a,b){return a+b; }require函数进⾏导⼊数据
//导入函数
let test=require('./demo2_01.js');
console.log(test.add(10,20));
Node JS的包管理器：npm（全球最大的开源生态系统）
1、通过npm init进行初始化操作
初始化出来的package.json先相当于是maven的pom文件
用于存放工程的依赖文件
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
<template><div>书写HTML代码的只能书写一个根标签</div>
</template>
<script>书写js代码的
</script>
<style>书写CSS代码的
</style>