前言:

创建一个Vue2工程项目前,我们主要需要安装node.jsvue-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安装是否成功
1
node -v

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

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

检查npm安装是否成功

1
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 <项目名>
  • 根据提示输入配置信息
1
2
3
4
5
6
7
8
9
项目名(自定义)
项目描述(自定义)
作者(自定义)
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 {
相关定于或代码
}