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 的异常处理机制
Nov 30 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
人口与计划生育责任书
2015/05/09 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2016年校长新年寄语
2015/08/17 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python