Vue(五). 安装脚手架及一些基本配置

爱喝水的小鼠2024-09-02 12:24

文章目录

  • vue脚手架前言
  • [1. 安装脚手架](#1. 安装脚手架)
    • [1. 安装nvm](#1. 安装nvm)
    • [2. 使用nvm安装node](#2. 使用nvm安装node)
    • [3. 配置node的全局路径和缓存路径](#3. 配置node的全局路径和缓存路径)
    • [4. 配置npm默认镜像源](#4. 配置npm默认镜像源)
    • [5. 安装脚手架](#5. 安装脚手架)
    • 全局路径和缓存测试
  • [2. 文件结构及项目配置](#2. 文件结构及项目配置)
    • [2.1 文件结构](#2.1 文件结构)
    • [2.2 项目基本配置](#2.2 项目基本配置)
    • [补充. vue项目安装依赖的一个问题](#补充. vue项目安装依赖的一个问题)

vue脚手架前言

脚手架也叫Vue CLI（command Line interface），安装脚手架之前需要配置node.js。简单记录一下我对Vue脚手架、node、npm，nvm的理解。

  • 为什么安装Vue脚手架

    Vue是一款JS框架。写代码的时候可以看出Vue框架的文件格式都是.vue，而浏览器只认识.js这种基本的文件，Vue脚手架就是将.vue转换为.js文件。使得Vue能够正常运行。

  • 为什么需要安装node

    node.js就是一个平台，一个环境。js文件可以在这个环境上运行。所以配置Node是为了让JS文件能够运行起来。

  • npm是啥，nvm是啥

    npm是node默认的包管理器，用来下载代码用到的依赖包。

    nvm用来切换node版本。

以炒鸡蛋举例的话，

鸡蛋------>js文件

node----->炒菜的锅（不同版本的node类似于不同的锅，铁锅or不粘锅）

npm----->用来管理炒菜的调料 (炒鸡蛋需要放盐，那就去买袋盐(即写文件需要某项依赖，通过npm install xxx下载不同的依赖包))

nvm----->根据要求，切换不同的锅。

1. 安装脚手架

nvm不是必须要安装的，必须要装的是node和脚手架。但我这里是通过nvm安装node，所以不打算安装nvm的话，接下来的内容帮助就不大了

主要参考博客1和博客2

1. 安装nvm

  • 去github下载安装包
  • 解压点击.exe文件，选择nvm安装位置
  • 选择node安装位置
  • 安装完之后，在终端输入nvm version，能查到版本号就说明安装成功了

    此时环境变量已经自动配置好了
  • 最后配置镜像下载源，打开nvm安装路径里的setting文件：

问：为什么要配置镜像？

答：配置镜像之后，下载的速度会快一点

javascript 复制代码 
npm_mirror:https://npmmirror.com/mirrors/npm/
node_mirror:https://npmmirror.com/mirrors/node/

通过下边的安装可以看出，安装node时会自动安装上npm。猜测，这两个镜像一个是下载node的，一个是下载npm的。

2. 使用nvm安装node

  • list available:查看可以安装的node版本

    一般都安装LTS这一类的
  • nvm install 版本号:安装对应版本的node。(nvm在安装node时，也会下载npm）

    node -v:查询安装的node版本
    npm -v:查询安装的npm版本
    nvm use 版本号：设置使用哪个版本的node
    nvm list：查看已安装的node

    在nvm文件夹也可以看出，有两个版本的node，每个版本的node里，都配有一个npm。（也就是，每个锅都有自己的一袋盐，并不共用同一袋）


    nvm切换版本：

    这个外层的node文件也就是安装nvm时指定node安装路径时的文件

3. 配置node的全局路径和缓存路径

在进行全局命令安装时，默认会安装在C盘，为了节省C盘空间，则需要配置全局和缓存路径

  • 首先在任意一个版本的文件夹里创建这两个文件(别的博客说这不是必须的，但我是这么做的，就这么记录了)。

设置接下来的prefix和cache后，以后每次通过nvm安装node就不需要手动创建这两个文件了

  • 设置全局prefix和缓存cache的存放路径

在cmd中执行一下两行代码（注意根据自己的情况将百分号内的内容替换掉）

javascript 复制代码 
npm config set cache "%NVM_SYMLINK%\node_cahce"
npm config set prefix "%NVM_SYMLINK%\node_global"

%NVM_SYMLINK%就是nvm安装时，自动生成的环境变量。

以我自己的举例，就是执行以下两行代码

javascript 复制代码 
npm config set cache "D:\JavaEnvironment\node\node_cahce"
npm config set prefix "D:\JavaEnvironment\node\node_global"
  • 配置环境变量，打开系统变量的path：

    前两个是自动生成的，后边那个自己加上就行

4. 配置npm默认镜像源

修改npm镜像源为淘宝镜像源

javascript 复制代码 
npm config set registry http://registry.npmmirror.com

检查是否成功

npm config get registry

5. 安装脚手架

（现在node版本已切换到18.20.0）

  1. 全局安装脚手架npm install -g @vue/cil。可以执行vue命令测试是否安装过。

有警告没关系，不用管。以后再创建配有脚手架的项目，直接通过vue命令执行即可，无需再安装脚手架。

  1. 切换到要创建项目的目录，使用命令vue create xxx创建项目
  2. 进入项目文件，使用命令npm run serve运行项目

    浏览器输入网站http://localhost:8080/，成功运行

全局路径和缓存测试

20.10.0版本的文件夹里，没有cache和global文件。使用nvm切换为这个版本的node之后，同样安装vue脚手架，可以看出已经自动添加了global和cache两个文件夹。

global文件夹里也有vue脚手架了

2. 文件结构及项目配置

2.1 文件结构

├── node_modules:存放项目依赖
├── public： 一般放置一些静态资源(图偏)
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 一般放置多个组件共用的静态资源
│   │   └── logo.png
│   │── component: 存放组件的文件夹，一般放置的是非路由组件/全局组件
│   │   └── HelloWorld.vue
│   │── App.vue: 唯一的根组件
│   │── main.js: 整个项目的入口文件
├── .gitignore: git版本管制忽略的配置(哪些文件需要git管理，哪些文件不需要git管理)
├── babel.config.js: babel的相关配置文件
├── package.json: 应用包配置文件，记录项目的信息及项目中有哪些依赖
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件，缓存性文件，记录项目上的依赖都从那儿来的等信息

需要注意：（没打包过，先记录一下）

  • 放在public里的静态资源，webpack打包时，会原封不动的打包到dist文件夹中
  • assets里的静态资源,webpack打包时,会被当作一个模块，打包到JS文件里面

2.2 项目基本配置

创建完项目之后，一般会进行以下几项配置，方便开发

1.项目运行时，浏览器自动打开页面

package.json文件：

javascript 复制代码 
"scripts": {
    "serve": "vue-cli-service serve --open", //添加--open
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

2. eslint校验功能关闭

vue.config.js文件:

javascript 复制代码 
module.exports = defineConfig({
    // 关闭eslint语法检查
    lintOnSave: false
})

3.src文件夹简写方法，配置别名@

我的项目里有jsconfig.json文件，没有的话应该自己创建一个就行

就是用@代替src,比如

javascript 复制代码 
import TypeNav from '@/components/TypeNav'

4 . 命名组件报错

Component name "xxxxx" should always be multi-word

解决方法：
package.json

javascript 复制代码 
"rules": {
    "vue/multi-word-component-names": "off"
}

参考的这个博客：https://blog.csdn.net/weixin_71403100/article/details/130223401

补充. vue项目安装依赖的一个问题

在配置好vue脚手架的vue项目里安装依赖，比如安装vue-router

执行命令 npm install vue-router@3

安装好之后，package.json中自动添加了该依赖项，项目的node_modules里也有vue-router文件夹

但是之前设置的node全局包里没有

如果运行的命令是npm install -g vue-router@3,全局包里就有了，但是项目的node_modules及package.json里没有。

目前还不知道全局包里没有这个依赖会怎样，但是项目至少还会正常运行

相关推荐
安得权14 分钟前
Ubuntu 20.04 部署 NET8 Web - Systemd 的方式 达到外网访问的目的
linux·前端·ubuntu
一个很帅的帅哥26 分钟前
实现浏览器的下拉加载功能(类似知乎)
开发语言·javascript·mysql·mongodb·node.js·vue·express
我是Superman丶40 分钟前
【前端UI框架】VUE ElementUI 离线文档 可不联网打开
前端·vue.js·elementui
sqll5671 小时前
最新简洁大方的自动发卡网站源码/鲸发卡v11.61系统源码/修复版
前端·开源·html
清灵xmf1 小时前
深入解析 JavaScript 事件委托
前端·javascript·html·事件委托
小妖别跑1 小时前
PDA（程序派生地址，Program Derived Address），为什么有这个地址，而不是直接指定地址
前端·智能合约
growdu_real2 小时前
pandoc自定义过滤器
vue.js
2301_796982142 小时前
网页打开时，下载的文件text/html/重定向类型有什么作用？
前端·html
重生之我在20年代敲代码2 小时前
HTML讲解（二）head部分
前端·笔记·html·web app
天下无贼！2 小时前
2024年最新版TypeScript学习笔记——泛型、接口、枚举、自定义类型等知识点
前端·javascript·vue.js·笔记·学习·typescript·html
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05Coze扣子平台完整体验和实践（附国内和国际版对比）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CANoe Trace窗口过滤栏消失的几种解决方法（附上最终解决方案）08yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习