VUE 项目构建_vue remote-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43395693/article/details/119981595

本文指导如何在Windows上安装Node.js和Vue CLI，通过Webpack模板创建Vue项目，集成Element-UI，并解决npm下载速度问题。重点讲解Webpack的工作原理和安装，以及如何引入并使用Element-UI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE 项目构建

1. 安装node环境

可以使用自带的终端命令行工具PowerShell；Windows下推荐安装git bash；
首先检测电脑是否安装node，如果还没有安装，可以自行到官网下载并安https://nodejs.org/en/download/

Administrator@MS-WLHNWTAOEMPK MINGW64 ~
$ node -v
v14.16.0

2. 安装Vue的脚手架工具vue-cli

在上面安装node环境的时候，会自动安装npm

Administrator@MS-WLHNWTAOEMPK MINGW64 ~
$ npm -v
7.6.0

注释：npm是随同 NodeJS 一起安装的包管理工具，我们经常使用它来下载第三方包到本地。但在使用 npm过程很多人估计都知道，在国内下载第三方包的速度极其之慢。今天为大家推荐使用淘宝 NPM 镜像，它是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。
淘宝 NPM 镜像地址：https://npm.taobao.org/，
你可以使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

#--global表示“下载全局”
$ cnpm install --global vue-cli

准备工作完成之后，下面利用Vue的脚手架工具vue-cli初始化搭建一个基于webpack模板的新项目

3. webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

webpack
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
接下来我们简单为大家介绍 Webpack 的安装与使用。
在安装 Webpack 前，你本地环境需要支持node.js。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
使用 cnpm 安装 webpack：

#安装 Webpack
cnpm install webpack -g

4. 新建项目

#这是一个基于webpack模板的新项目
vue init webpack Remote_Link

在这里插入图片描述
在此过程中会提示你输入项目名称、项目描述、作者、是否安装vue-router等，根据自己的情况选择输入，然后enter，在此过程中会自动帮你npm install 安装项目需要的模板。
键入“ls”||“ll”查看目录结构

然后cd到你的新项目下，安装依赖项并启动本地开发

#安装依赖
$ npm install
$ cnpm install
#启动本地开发
$ npm run dev

安装完成之后的效果图如下：

5. 安装/引入Element-UI

接下来，就可以安装/引入Element-UI

#命令行安装Element-UI
$ cnpm install element-ui -s

或者在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
}).$mount('#app')