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里没有。

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

相关推荐
真滴book理喻18 分钟前
Vue（四）
前端·javascript·vue.js
蜜獾云20 分钟前
npm淘宝镜像
前端·npm·node.js
dz88i821 分钟前
修改npm镜像源
前端·npm·node.js
Jiaberrr25 分钟前
解锁 GitBook 的奥秘：从入门到精通之旅
前端·gitbook
程序员_三木42 分钟前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
顾平安2 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网2 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工2 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼2 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js
沈剑心2 小时前
如何在鸿蒙系统上实现「沉浸式」页面？
前端·harmonyos
热门推荐
01构建高效的广告投放系统：应用架构的设计与实现02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍