从零开始搭建 vue-cli 项目

简介: 从零开始搭建 vue-cli 项目

安装 node.js 环境

下载地址为:(nodejs.org/en/)

查看是否安装成功

node -vnpm -v

复制代码

有版本号的就说明安装成功了


网络异常,图片无法展示
|


为了提高我们的速度可以下载淘宝镜像

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

复制代码

注意安装了淘宝镜像 npm 命令要改成 cnpm

然后全局安装 vue-cli

cnpm install -g vue-cli

复制代码

查看 vue 版本号注意这里的 V 是大写的

vue -V

复制代码


网络异常,图片无法展示
|


接下来开始创建 vue-cli 注意 hello-vue 是项目名称

vue create hello-vue

复制代码

通过↑ ↓ 箭头选择配置

“sc”、“a”“sa”是预设名

default vue3:是默认配置 3.x

default vue2:是默认配置 2.x

Manually select features:自定义配置

这里选“Manually select features”自定义配置


网络异常,图片无法展示
|


通过↑ ↓ 箭头选择你需要的配置 这里空格是选中,a 是全选,i 是反选

网络异常,图片无法展示
|


Babel :转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。

TypeScript: TypeScript 是一个 JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了

Progressive Web App (PWA) Support: 渐进式 Web 应用程序

Router :vue-router(vue 路由)

Vuex : vuexvue 的状态管理模式

CSS Pre-processors :CSS 预处理器(如:less、sass)

Linter / Formatter :代码风格检查和格式化(如:ESlint)

Unit Testing :单元测试(unit tests)

E2E Testing : e2e(end to end) 测试

选脚手架版本


网络异常,图片无法展示
|


路由器是否使用历史记录模式?y 是 n 否


网络异常,图片无法展示
|


您希望将 Babel、ESLint 等的配置放在哪里。?

In dedicated config files :在专用配置文件中

In package.json:在 package.json


网络异常,图片无法展示
|


是否将此保存为将来项目的预设?y 是 n 否


网络异常,图片无法展示
|


将预设另存为:


网络异常,图片无法展示
|


创建成功


网络异常,图片无法展示
|


接下来启动项目

cd 到项目目录

cd hello-vue

复制代码

启动项目

npm run serve

复制代码


网络异常,图片无法展示
|


复制网址到浏览器打开


网络异常,图片无法展示
|


vue-cli 项目就创建好了

目录
相关文章
|
6天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
46 5
|
6天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
82 3
|
6天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
38 6
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
9 1
|
5天前
|
监控 JavaScript 前端开发
Vue 项目性能优化指南:提升应用速度与效率
Vue 项目性能优化指南:提升应用速度与效率
|
5天前
|
JavaScript Go
VUE3+vite项目中动态引入组件和异步组件
VUE3+vite项目中动态引入组件和异步组件
|
6天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
10 3
|
6天前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
15 1
|
6天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
12 0
|
6天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
8 0