使用Vue-CLI搭建Vue项目环境

584 阅读2分钟

前言:本文简单介绍如何安装Vue官方提供的脚手架和如何通过Vue脚手架搭建工程化项目,并说明工程化项目的项目架构和启动项目。

Vue-CLI版本:Vue-CLI 4.0

前期准备

需要先安装好Node.js环境和Git环境

安装Node.js环境

安装Git

Vue-cli 简介

Vue-cli是Vue官方提供的一个脚手架,基于 webpack 构建,用于快速生成一个Vue的项目模板(优先定义好的目录结构及基础代码),类似Maven项目中预先创建的模板项目,定义好项目的大致结构方便项目开发。

Snipaste_2021-10-24_14-56-35

Vue-cli 官方文档

Vue.js 官方文档

安装Vue-cli

Vue-cli:生成Vue工程模板(脚手架)

cnpm install -g vue-cli 这是vue-cli(2.0以下)的旧安装方法,vue-cli(3.0以上)包名称由 vue-cli 改成了 @vue/cli,需要先卸载旧版本再安装新版本。cli.vuejs.org/zh/guide/in…

Snipaste_2021-10-24_14-18-31

先卸载旧版本

 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

Snipaste_2021-10-27_19-20-46

项目架构

目录结构说明
build项目构建(webpack)相关代码
config配置文件
node_module依赖模块
src源码
static静态资源
test初始测试
index.html首页入口文件
package.json项目配置文件
README.md项目说明文档

Snipaste_2021-10-27_19-17-31

启动项目

 cd myapp
 npm run serve

打包项目

将项目打包成一个dist文件夹,用于项目部署

 npm run build

相关技术

Webpack

Element-UI

Axios