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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue postcss-px2rem 自适应布局
May 15 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 输出简单动态WAP页面
2009/06/09 PHP
php异常处理捕获错误整理
2019/09/23 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
用原生JS实现简单的多选框功能
2017/06/12 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
python检测服务器是否正常
2014/02/16 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
python中黄金分割法实现方法
2015/05/06 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python 异常处理的实例详解
2017/09/11 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python字符串Intern机制详解
2019/07/01 Python
Django 解决由save方法引发的错误
2020/05/21 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
文案策划求职信
2014/03/18 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
2014年母亲节寄语
2014/05/07 职场文书
毕业生找工作求职信
2014/08/05 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
党课主持词大全
2015/06/30 职场文书
公司财务管理制度
2015/08/04 职场文书
高中化学教学反思
2016/02/22 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js