Vue脚手架基础

JAY.LIN 收录于前端

2025-03-10 约 991 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=146162915

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 项目的创建

官方样例：

创建一个项目：

npm create vue@latest

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

目录

Vue脚手架基础

Vue脚手架基础