前言：

创建一个Vue2工程项目前，我们主要需要安装node.js、vue-cli

【2022-05-17记】本篇记录的是Vue2的内容

安装node.js和npm

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

——引自菜鸟教程

node.js官网下载Node.js (nodejs.org)

或者访问node.js中文网Node.js 中文网 (nodejs.cn)

通过cmd检查node.js安装是否成功

node -v

如果出现版本号信息说明安装成功，例如出现v16.13.0

npm是javascript的包管理工具,是和Node.js一起发布的，只要安装了Node.js，npm也安装好了

检查npm安装是否成功

npm -v

使用npm安装包示例

1	npm install <包名> [参数]

-g表示全局安装

淘宝npm 镜像(可选但推荐)

由于国内直接使用 npm 的官方镜像比较慢，所以这里推荐使用淘宝npm镜像

【2022-05-16更新】原淘宝 npm 域名即将停止解析 📢📢

即https://registry.npm.taobao.org即将停止解析

所以我们现在要用新的淘宝 npm 域名

（旧淘宝npm域名目前好像会自动跳转到新的npm域名，不过既然有新的还是趁早换了吧，之后可能会停止解析了，具体可看官网信息npmmirror 中国镜像站）

安装cnpm

安装命令如下

1	npm install -g cnpm --registry=https://registry.npmmirror.com

这样你以后就可以将npm替换成cnpm以加快下载速度

下文将同时提供npm和cnpm的命令，请自行按需复制

当然你也可以直接将npm默认设置为淘宝镜像地址

查看当前镜像源

1	npm config get registry

设置淘宝镜像源

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

需要换回时改为官方的镜像源

1	npm config set registry https://registry.npmjs.org

全局安装vue和vue-cli

安装vue

1
2
3

npm install vue -g

cnpm install vue -g

安装vue-cli

vue-cli是vue官方出品的快速构建单页应用的脚手架

1
2
3

npm install vue-cli -g

cnpm install vue-cli -g

创建前端工程项目

搭建项目

1	vue init webpack <项目名>

根据提示输入配置信息

项目名（自定义）
项目描述（自定义）
作者（自定义）
Vue build方式选择(回车即可)
是否安装vue-router（选yes）
ESLint预设置方式选择（选no）
是否安装单元测试模块（选no）
是否安装e2e测试（选no）
选择项目运行方式（选npm）

运行前端工程项目

按步骤进行

进入项目文件夹
安装项目所需要的依赖包

1
2
3

npm install

cnpm install

运行vue项目

1
2
3

npm run dev

cnpm run dev

此时注意不要关闭命令窗口

输入命令窗口提示的网址

一般为

1	http://localhost:8080

vue工程项目结构

主要目录

根目录：存放index.html及项目配置文件
src:源代码文件（.vue、.js等）
components：存放组件文件
static：存放所用图片、js、css等资源
build：编译配置文件
config：webpack配置文件
node_modules：存放下载的webpack模板包

主要文件

App.vue和main.js入口文件，相当于挂载点和Vue实例代码
router.js：路由配置

重要命令

组件导入

1
2
3

import 组件名 from '组件地址‘
或
import ‘路径及文件名

组件导出

1
2
3

export  {组件名}或default {
	相关定于或代码
}