vue脚手架项目创建步骤详解


Posted in Vue.js onMarch 02, 2021

vue脚手架 —> vue.cli

快速的创建一个大型的功能齐全的vue项目模板(初始化项目)

土味解释:快速的创建一个空的vue项目

安装(全局安装)

  • 全局安装
> npm i @vue/cli -g
  • 创建vue脚手架项目
> vue create 项目名

配置选项

Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint) 
 Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
 Manually select features
  • 按上下选择 ,回车确认,这里选择第三项手动

选择功能

Vue CLI v4.5.11
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
  • 上下移动光标,空格选择,回车确认,这里选择 1 2 5 6 选项

选择版本

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
 3.x (Preview)
  • 这里选择 2.x

是否使用历史模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
  • 这里输入n 回车

Babel, ESLint等的配置位置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
 In package.json
  • 这里选择选择第一项 专用配置文件存放

是否存为预置

? Save this as a preset for future projects? (y/N)
  • 这里选择 n

创建成功

Vue CLI v4.5.11
Creating project in D:\MyStudy\myvue2.
⚙️ Installing CLI plugins. This might take a while...


> core-js@3.9.1 postinstall D:\MyStudy\myvue2\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\MyStudy\myvue2\node_modules\ejs
> node ./postinstall.js

added 1208 packages from 928 contributors in 21.836s

61 packages are looking for funding
run `npm fund` for details

? Invoking generators...
? Installing additional dependencies...

added 5 packages from 1 contributor in 4.671s

61 packages are looking for funding
run `npm fund` for details    

⚓ Running completion hooks...

? Generating README.md...

? Successfully created project myvue2.  
? Get started with the following commands:

$ cd myvue2
$ npm run serve

进入项目 目录

> cd myvue2

启动服务

> npm run serve
DONE Compiled successfully in 2492ms                   

 App running at:
 - Local:  http://localhost:8080/ 
 - Network: http://192.168.17.154:8080/

 Note that the development build is not optimized.
 To create a production build, run npm run build.

到此这篇关于vue脚手架项目创建步骤详解的文章就介绍到这了,更多相关vue脚手架项目创建内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 #Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 #Vue.js
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
javascript中this的四种用法
2015/05/11 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python基于http下载视频或音频
2018/06/20 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
班级出游活动计划书
2014/08/15 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
学校运动会简讯
2015/07/20 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL