vue-cli4.x 搭建Vue项目及初始化

一 安装环境

vue-cli 4.5.12
node.js 14.15.1

二 安装Node.js

下载地址：https://nodejs.org/en/
安装完成后，查看node版本

node -v

三 安装vue-cli

全局安装vue-cli

npm install(i) -g @vue/cli

npm 是使用国外资源，下载会很慢，可以使用国内淘宝镜像下载
安装cnpm

npm install -g cnpm -registry=https:://registry.npm.taobao.org

cnpm安装完成后，可使用cnpm进行安装

cnpm install(i) -g @vue/cli 

安装完成后，查看vue-cli版本

vue -V

四 创建项目

创建项目

vue create xf-project(项目名称)

这里可以根据自己的需求，选择安装方式，我选择的是手动选择功能
选择配置：
Choose Vue version 选择vue的版本
Babel Javascript编译器(利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法)
TypeScript 支持使用TypeScript书写源码
Progressive Web App（PWA）Support PWA支持
Router 支持vue-router
Vuex 支持vuex
CSS Pre-processors 支持CSS预处理器
Linter / Formatter 支持代码风格检查喝格式化
Unit Testing 支持单元测试
E2E Testing 支持E2E测试

点击空格选中要安装的功能，点击Enter键下一步，接下来的选择会基于选择安装的功能进行
选择vue版本

配置路由(是否使用历史（即上一次）使用的 Router 配置)

选择CSS预处理器

选择一个linter/formatter配置

选择lint方式,保存时检查/提交时检查


将此保存为feture项目的预设

项目创建中

如果安装速度太慢，可以使用淘宝镜像进行安装

create install xf-project(项目名称) --registry=https://registry.npm.taobao.org 

项目创建完成

进入项目目录

cd xf-project

运行项目

npm run serve

在浏览器看到此页面表明项目创建成功
参考：
vue-cli官网：https://cli.vuejs.org/zh/guide/