前端工程化-Vue脚手架安装

 在现代前端开发中，Vue.js已成为一个流行的框架，而Vue CLI（脚手架）则为开发者提供了一个方便的工具，用于快速创建和管理Vue项目。本文将详细介绍如何安装Vue脚手架，创建新项目以及常见问题的解决方法。

什么是Vue脚手架？
        Vue脚手架是官方提供的标准化开发工具，其主要功能是简化Vue项目的创建和配置，从而提升开发效率。它支持命令行和UI界面，能自动生成项目结构、配置第三方依赖和进行开发环境管理等。

Node.js环境安装

Node.js — 在任何地方运行 JavaScript (nodejs.org) ,可以去官网下载，按照步骤安装.

选择16.20.2的版本:

安装好后，记得验证是否安装成功(安装时勾选环境变量的配置 )

在终端输入命令: node -v,出现版本号证明安装成功

安装好后设置环境变量

配置npm全局安装路径

1.以管理员身份打开cmd

2.设置全局路径

注意这个双引号里的路径就是你安装Node.js时的安装路径，每个人根据自己路径进行安装

npm config set prefix "D:\develop\NodeJs"

npm config get prefix

3.镜像

注意这个双引号里的路径就是你安装Node.js时的安装路径，每个人根据自己路径进行安装

阿里镜像

npm config set registry https://registry.npmmirror.com

(在终端输入此命令)

为什么要设置镜像:

1.网络限制：在某些网络环境（如公司、学校或特定地区），直接访问外部网站可能受到限制，导致无法下载 npm 包或其他依赖。这时，通过设置代理，可以绕过这些限制，顺利访问所需资源。
2.提高下载速度：由于国际带宽的限制，直接从国外的 npm 源下载包可能会非常慢。国内的代理镜像（如淘宝镜像、阿里云镜像等）通常提供更快的下载速度，能够显著提高安装效率。
3.避免连接超时：由于网络不稳定，直接访问外部源时可能会遇到连接超时的问题。使用国内的代理镜像可以减少这种情况的发生，从而提高成功下载的概率。
4.简化配置：通过设置代理镜像，可以在 npm 配置中统一管理源地址，避免在每次安装时都需要手动调整。这对于频繁使用 npm 的开发者来说，能够节省时间和精力。
 

安装脚手架

npm install -g @vue/cli

(在终端输入此命令)

安装成功以后要进行验证:(在终端输入下图中的语句)

创建第一个VUE项目

1.打开vue-workspace目录

2.创建vue项目

3.VUE项目的结构 

 

安装elementUI

npm下载:(在终端输入命令 )

 

main.js引入elementUI

 

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')