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(项目名称)

vue-cli4.x 搭建Vue项目及初始化
这里可以根据自己的需求,选择安装方式,我选择的是手动选择功能
vue-cli4.x 搭建Vue项目及初始化
点击空格选中要安装的功能,点击Enter键下一步,接下来的选择会基于选择安装的功能进行
选择vue版本
vue-cli4.x 搭建Vue项目及初始化
配置路由(是否使用历史(即上一次)使用的 Router 配置)
vue-cli4.x 搭建Vue项目及初始化
选择CSS预处理器
vue-cli4.x 搭建Vue项目及初始化
选择一个linter/formatter配置
vue-cli4.x 搭建Vue项目及初始化
选择lint方式,保存时检查/提交时检查
vue-cli4.x 搭建Vue项目及初始化
vue-cli4.x 搭建Vue项目及初始化
将此保存为feture项目的预设
vue-cli4.x 搭建Vue项目及初始化
项目创建中
vue-cli4.x 搭建Vue项目及初始化
如果安装速度太慢,可以使用淘宝镜像进行安装

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

项目创建完成
vue-cli4.x 搭建Vue项目及初始化
进入项目目录

cd xf-project

运行项目

npm run serve

vue-cli4.x 搭建Vue项目及初始化
vue-cli4.x 搭建Vue项目及初始化
在浏览器看到此页面表明项目创建成功
参考:
vue-cli官网:https://cli.vuejs.org/zh/guide/

上一篇:vue项目创建


下一篇:vue介绍及安装使用