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

本文主要是介绍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(项目名称)

这里可以根据自己的需求，选择安装方式，我选择的是手动选择功能

点击空格选中要安装的功能，点击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/

这篇关于vue-cli4.x 搭建Vue项目及初始化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！