Vue工程项目构建
前言:
创建一个Vue工程项目前,我们主要需要安装node.js
、vue-cli
安装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镜像
安装命令如下
1 | npm install cnpm -g --registry=https://registry.npm.taobao.org |
这样你以后就可以将npm
替换成cnpm
以加快下载速度
下文将同时提供npm和cnpm的命令,请自行按需复制
全局安装vue和vue-cli
- 安装vue
1 | npm install vue -g |
- 安装vue-cli
vue-cli是vue官方出品的快速构建单页应用的脚手架
1 | npm install vue-cli -g |
创建前端工程项目
按以下顺序操作
新建项目文件夹
用cd命令切换进入该文件夹
输入命令
1 | vue init webpack <项目名> |
- 根据提示输入配置信息
1 | 项目名(自定义) |
运行前端工程项目
按步骤进行
进入项目文件夹
安装项目所需要的依赖包
1 | npm install |
- 运行vue项目
1 | npm 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 | import 组件名 from '组件地址‘ |
- 组件导出
1 | export {组件名}或default { |