【前端】搭建Vue3框架

ゝ一纸荒年。 2023-10-14 14:06 13阅读 0赞

#### 目录 ####

*  一、搭建准备
 *  二、node.js安装
 *   *  1、下载并安装
     *  2、配置默认安装目录和缓存日志目录
     *   *  ①、创建默认安装目录和缓存日志目录（我的node.js目录在D盘，所以直接在node.js文件夹下创建）
         *  ②、执行命令，配置默认安装目录和缓存日志目录到刚才创建的文件夹
     *  3、配置环境变量
     *   *  ①、按win键并输入“编辑系统环境变量”，打开点击下方的“环境变量”
         *  ②、在系统变量下新建NODE\_PATH变量，输入默认安装目录node\_global下的node\_modules的路径
         *  ③、进入系统变量的Path，输入node.js安装路径
         *  ④、进入用户变量的Path，输入node.js默认的模块调用路径
     *  4、配置淘宝镜像
     *   *  ①、安装cnpm
         *  ②、验证是否安装成功
 *  三、安装vue和脚手架
 *   *  1、安装vue.js
     *  2、验证安装是否成功
     *  3、安装webpack模块
     *  4、安装webpack-cli
     *  5、安装vue-cli 3.x
 *  四、创建vue3项目
 *   *  1、创建项目
     *  2、选择安装版本
     *  3、项目需求配置
     *  4、选择vue版本
     *  5、是否使用history router
     *  6、选择CSS预处理器
     *  7、选择ESLint
     *  8、选择额外的Lint功能
     *  9、Bable和ESLint配置位置
     *  10、是否保存为默认配置（如果选择yes，需要自己起个默认名）
     *  11、创建成功
 *  五、启动项目
 *  六、目录结构分析

## 一、搭建准备 ##

*  VScode/HBuilder等任何一种前端开发工具
 *  node.js&npm本地开发环境

## 二、node.js安装 ##

### 1、下载并安装 ###

> Node.js官网：[Node.js官网][Node.js]

![在这里插入图片描述][9d019388f0dd4a5b8abebfdb0e406176.png]

> 安装成功后，在CMD控制台输入以下两个命令验证是否安装成功

#查看node版本
    node -v
    
    #查看npm版本
    npm -v

![在这里插入图片描述][b34816f178804efbb2d0273bb4d83a95.png]

### 2、配置默认安装目录和缓存日志目录 ###

#### ①、创建默认安装目录和缓存日志目录（我的node.js目录在D盘，所以直接在node.js文件夹下创建） ####

> 由于在执行全局安装语句时，安装的模块会默认安装到C:\\Users\\用户名\\AppData\\Roaming\\npm 目录下，久而久之C盘很容易被沾满（C盘足够大可以无视此步骤），所以将默认安装目录和缓存日志重新配置到其他盘符节约C盘空间

![在这里插入图片描述][b79a76e815a24eac9071fbfc6513e825.png]

#### ②、执行命令，配置默认安装目录和缓存日志目录到刚才创建的文件夹 ####

npm config set prefix "D:\项目配件\Node\node_global"
    npm config set cache "D:\项目配件\Node\node_cache"

![在这里插入图片描述][929cdefeb90f4607a2b728f39f429831.png]

### 3、配置环境变量 ###

#### ①、按win键并输入“编辑系统环境变量”，打开点击下方的“环境变量” ####

![在这里插入图片描述][41ce42f170b14fa5ad9f940b74f57697.png]![在这里插入图片描述][654c30d803e3423b9a72ec6e30a82001.png]

#### ②、在系统变量下新建NODE\_PATH变量，输入默认安装目录node\_global下的node\_modules的路径 ####

D:\项目配件\Node\node_global\node_modules

![在这里插入图片描述][9645381d99a74737a6cff416e3b3a8b8.png]

#### ③、进入系统变量的Path，输入node.js安装路径 ####

D:\项目配件\Node\

![在这里插入图片描述][4b5c2ef2727247e993df3bbab30c590c.png]

#### ④、进入用户变量的Path，输入node.js默认的模块调用路径 ####

D:\项目配件\Node\node_global
    D:\项目配件\Node\node_cache

![在这里插入图片描述][24d9222614974698a546b8ce11625904.png]

### 4、配置淘宝镜像 ###

> 使用NPM来安装用的是国外的服务器，经常会出现超时错误，可以通过修改为国内的淘宝镜像来加速安装。淘宝NPM镜像是一个完整npmjs.com镜像，同步频率目前为10分钟一次，以保证尽量与官方服务同步

#### ①、安装cnpm ####

npm install -g cnpm --registry=https://registry.npm.taobao.org

![在这里插入图片描述][95ae709c336b47df8b396aa711e370d6.png]

#### ②、验证是否安装成功 ####

cnpm config get registry

![在这里插入图片描述][9ae9fd65e31b4197b206f5903ce5c918.png]

## 三、安装vue和脚手架 ##

### 1、安装vue.js ###

cnpm install vue -g

![在这里插入图片描述][dbf0d1c31efd4861a5eb945c7f5f09ab.png]

### 2、验证安装是否成功 ###

cnpm info vue

![在这里插入图片描述][5bd358e0239e4d31a4c2162ed41ce8ce.png]

### 3、安装webpack模块 ###

cnpm install webpack -g

![在这里插入图片描述][dd4d892c31ba4e549ad7c14f927d42e5.png]

### 4、安装webpack-cli ###

cnpm install --global webpack-cli

![在这里插入图片描述][b309b09d30ea4aa8b7e9e6c3142502da.png]

### 5、安装vue-cli 3.x ###

cnpm install @vue/cli –g

![在这里插入图片描述][0e686b463b49409fa31ce1f5655b3658.png]![在这里插入图片描述][ddaa2ef0d7b647308c8485f1bc2c2a9f.png]

## 四、创建vue3项目 ##

> 以管理员身份打开cmd控制台，进入想要创建项目的目录，开始创建项目

### 1、创建项目 ###

vue create [项目名称]

### 2、选择安装版本 ###

> 默认安装vue2  
> 默认安装vue3  
> 自定义安装

这里我选择的是第三个自定义安装

![在这里插入图片描述][43c883f80e70463bb38268ec9b754db4.png]

### 3、项目需求配置 ###

【\*号代表选中，根据自己项目的需求，空格选中，选中完回车确认】  
![在这里插入图片描述][5999f6e9877f4f8d93153734508d8712.png]

> Babel（JavaScript 编译器，可将代码转换为向后兼容）  
> TypeScript（编程语言，大型项目建议使用）  
> Progressive Web App (PWA) Support-APP使用  
> Router（路由）  
> Vuex（Vuex）  
> CSS Pre-processors（css预处理）  
> Linter / Formatter（代码风格/格式化）  
> Unit Testing（单元测试）  
> E2E Testing（e2e测试）

### 4、选择vue版本 ###

想要创建一个vue3的项目，所以这里我选择的是3.x  
![在这里插入图片描述][23dc6072e962493580a53bb01f5a9e6d.png]

### 5、是否使用history router ###

> Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）  
> hash： 浏览器url址栏 中的 \# 符号（如这个 URL：http://www.abc.com/\#/hello，hash 的值为“ \#/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

> history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定浏览器支持）。单页客户端应用，history mode 需要后台配置支持

![在这里插入图片描述][5785fa17c95f45b2b5f66a6609621fff.png]

### 6、选择CSS预处理器 ###

![在这里插入图片描述][61ff5f33c2be43a382a23f5f13ee7ab0.png]

### 7、选择ESLint ###

![在这里插入图片描述][0e464f8909184763a24f8e6e4e99bc10.png]

### 8、选择额外的Lint功能 ###

> Lint on save 保存后检测  
> Lint and fix on commit commit时检测

![在这里插入图片描述][333de6654c954e0389a5c8fff1f5feb7.png]

### 9、Bable和ESLint配置位置 ###

![在这里插入图片描述][8350cbf4972748a9acc91d06b30394cd.png]

### 10、是否保存为默认配置（如果选择yes，需要自己起个默认名） ###

![在这里插入图片描述][88ca41c92ecc4bada457ebb9c02f0df0.png]  
![在这里插入图片描述][598dc0fc1bd8415d83dded73ca828e91.png]

### 11、创建成功 ###

![在这里插入图片描述][07a5d4d8225e48e192d6287d9dde03fa.png]

## 五、启动项目 ##

**根据创建成功中的提示，使用命令进行项目运行**  
![在这里插入图片描述][2e7035fedff94a568c7237520fe27e48.png]

#项目运行
    npm run serve

![在这里插入图片描述][0270730271194528944e06ac003fd896.png]

## 六、目录结构分析 ##

![在这里插入图片描述][4d90045cfe224ea1b6a6a02bcfd42504.png]

[Node.js]: https://nodejs.org/en/download
[9d019388f0dd4a5b8abebfdb0e406176.png]: https://img-blog.csdnimg.cn/9d019388f0dd4a5b8abebfdb0e406176.png
[b34816f178804efbb2d0273bb4d83a95.png]: https://img-blog.csdnimg.cn/b34816f178804efbb2d0273bb4d83a95.png
[b79a76e815a24eac9071fbfc6513e825.png]: https://img-blog.csdnimg.cn/b79a76e815a24eac9071fbfc6513e825.png
[929cdefeb90f4607a2b728f39f429831.png]: https://img-blog.csdnimg.cn/929cdefeb90f4607a2b728f39f429831.png
[41ce42f170b14fa5ad9f940b74f57697.png]: https://img-blog.csdnimg.cn/41ce42f170b14fa5ad9f940b74f57697.png
[654c30d803e3423b9a72ec6e30a82001.png]: https://img-blog.csdnimg.cn/654c30d803e3423b9a72ec6e30a82001.png
[9645381d99a74737a6cff416e3b3a8b8.png]: https://img-blog.csdnimg.cn/9645381d99a74737a6cff416e3b3a8b8.png
[4b5c2ef2727247e993df3bbab30c590c.png]: https://img-blog.csdnimg.cn/4b5c2ef2727247e993df3bbab30c590c.png
[24d9222614974698a546b8ce11625904.png]: https://img-blog.csdnimg.cn/24d9222614974698a546b8ce11625904.png
[95ae709c336b47df8b396aa711e370d6.png]: https://img-blog.csdnimg.cn/95ae709c336b47df8b396aa711e370d6.png
[9ae9fd65e31b4197b206f5903ce5c918.png]: https://img-blog.csdnimg.cn/9ae9fd65e31b4197b206f5903ce5c918.png
[dbf0d1c31efd4861a5eb945c7f5f09ab.png]: https://img-blog.csdnimg.cn/dbf0d1c31efd4861a5eb945c7f5f09ab.png
[5bd358e0239e4d31a4c2162ed41ce8ce.png]: https://img-blog.csdnimg.cn/5bd358e0239e4d31a4c2162ed41ce8ce.png
[dd4d892c31ba4e549ad7c14f927d42e5.png]: https://img-blog.csdnimg.cn/dd4d892c31ba4e549ad7c14f927d42e5.png
[b309b09d30ea4aa8b7e9e6c3142502da.png]: https://img-blog.csdnimg.cn/b309b09d30ea4aa8b7e9e6c3142502da.png
[0e686b463b49409fa31ce1f5655b3658.png]: https://img-blog.csdnimg.cn/0e686b463b49409fa31ce1f5655b3658.png
[ddaa2ef0d7b647308c8485f1bc2c2a9f.png]: https://img-blog.csdnimg.cn/ddaa2ef0d7b647308c8485f1bc2c2a9f.png
[43c883f80e70463bb38268ec9b754db4.png]: https://img-blog.csdnimg.cn/43c883f80e70463bb38268ec9b754db4.png
[5999f6e9877f4f8d93153734508d8712.png]: https://img-blog.csdnimg.cn/5999f6e9877f4f8d93153734508d8712.png
[23dc6072e962493580a53bb01f5a9e6d.png]: https://img-blog.csdnimg.cn/23dc6072e962493580a53bb01f5a9e6d.png
[5785fa17c95f45b2b5f66a6609621fff.png]: https://img-blog.csdnimg.cn/5785fa17c95f45b2b5f66a6609621fff.png
[61ff5f33c2be43a382a23f5f13ee7ab0.png]: https://img-blog.csdnimg.cn/61ff5f33c2be43a382a23f5f13ee7ab0.png
[0e464f8909184763a24f8e6e4e99bc10.png]: https://img-blog.csdnimg.cn/0e464f8909184763a24f8e6e4e99bc10.png
[333de6654c954e0389a5c8fff1f5feb7.png]: https://img-blog.csdnimg.cn/333de6654c954e0389a5c8fff1f5feb7.png
[8350cbf4972748a9acc91d06b30394cd.png]: https://img-blog.csdnimg.cn/8350cbf4972748a9acc91d06b30394cd.png
[88ca41c92ecc4bada457ebb9c02f0df0.png]: https://img-blog.csdnimg.cn/88ca41c92ecc4bada457ebb9c02f0df0.png
[598dc0fc1bd8415d83dded73ca828e91.png]: https://img-blog.csdnimg.cn/598dc0fc1bd8415d83dded73ca828e91.png
[07a5d4d8225e48e192d6287d9dde03fa.png]: https://img-blog.csdnimg.cn/07a5d4d8225e48e192d6287d9dde03fa.png
[2e7035fedff94a568c7237520fe27e48.png]: https://img-blog.csdnimg.cn/2e7035fedff94a568c7237520fe27e48.png
[0270730271194528944e06ac003fd896.png]: https://img-blog.csdnimg.cn/0270730271194528944e06ac003fd896.png
[4d90045cfe224ea1b6a6a02bcfd42504.png]: https://img-blog.csdnimg.cn/4d90045cfe224ea1b6a6a02bcfd42504.png