前言:本文简单介绍如何安装Vue官方提供的脚手架和如何通过Vue脚手架搭建工程化项目,并说明工程化项目的项目架构和启动项目。
Vue-CLI版本:Vue-CLI 4.0
前期准备
需要先安装好Node.js
环境和Git
环境
Vue-cli 简介
Vue-cli是Vue官方提供的一个脚手架,基于 webpack 构建,用于快速生成一个Vue的项目模板(优先定义好的目录结构及基础代码),类似Maven项目中预先创建的模板项目,定义好项目的大致结构方便项目开发。
安装Vue-cli
Vue-cli:生成Vue工程模板(脚手架)
cnpm install -g vue-cli 这是vue-cli(2.0以下)的旧安装方法,vue-cli(3.0以上)包名称由 vue-cli
改成了 @vue/cli
,需要先卸载旧版本再安装新版本。https://cli.vuejs.org/zh/guide/installation.html
先卸载旧版本
npm uninstall vue-cli -g
安装新版本
cnpm install -g @vue/cli
验证版本
vue --version
创建Vue项目
创建一个Vue项目myapp
,在电脑的任意目录新建空文件夹,输入以下命令,根据自己的需要进行选择创建
旧版本创建命令:vue init webpack myapp
新版本创建命令:
vue create myapp # 命令行形式创建,myapp为项目名(自定义)
# or 图形化界面创建项目
vue ui # 图形化界面创建(推荐)
创建项目慢,可以将使用淘宝镜像进行加速,编辑 ~/.vuerc
文件
将 "useTaobaoRegistry": false
改为 "useTaobaoRegistry": true
项目架构
目录结构 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置文件 |
node_module | 依赖模块 |
src | 源码 |
static | 静态资源 |
test | 初始测试 |
index.html | 首页入口文件 |
package.json | 项目配置文件 |
README.md | 项目说明文档 |
启动项目
cd myapp
npm run serve
打包项目
将项目打包成一个dist文件夹,用于项目部署
npm run build
相关技术
Webpack
Element-UI
Axios