Javascript

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项目及初始化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!