vue-cli3.0 脚手架搭建项目的过程详解


Posted in Javascript onOctober 19, 2018

1.安装vue-cli 3.0

npm install -g @vue/cli
# or
yarn global add @vue/cli

安装成功后查看版本:vue -V(大写的V)

vue-cli3.0 脚手架搭建项目的过程详解

2.命令变化

vue create --help

用法:create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目

选项:

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry (仅用于 npm 客户端)
  -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

3.创建项目

去到指定目录下创建项目(project-name:项目名称)

vue create project-name

vue-cli3.0 脚手架搭建项目的过程详解

my-default 是 我原来保存好的模板;

default 是 使用默认配置

Manually select features 是 自定义配置

vue-cli3.0 脚手架搭建项目的过程详解

4.选择配置(自定义配置)

vue-cli3.0 脚手架搭建项目的过程详解

5.选择css预编译,这里我选择less

Please pick a preset: Manually select features
 Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
 SCSS/SASS
 > LESS
 Stylus

6.语法检测工具,这里我选择ESLint + Standard config

Please pick a preset: Manually select features
 Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
 Pick a linter / formatter config: (Use arrow keys)
 ESLint with error prevention only
 ESLint + Airbnb config
> ESLint + Standard config
 ESLint + Prettier

7.选择语法检查方式,这里我选择保存就检测

Please pick a preset: Manually select features
 Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
 Pick a linter / formatter config: Prettier
 Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // 保存就检测
 ( ) Lint and fix on commit // fix和commit时候检查

8.接下来会问你把babel,postcss,eslint这些配置文件放哪,这里随便选,我选择放在独立文件夹

Please pick a preset: Manually select features
 Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
 Pick a linter / formatter config: Prettier
 Pick additional lint features: Lint on save
 Pick a unit testing solution: Jest
 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
 In package.json // 放package.json里

9.键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的我保存的名字为my-default

Please pick a preset: Manually select features
 Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
 Pick a linter / formatter config: Prettier
 Pick additional lint features: Lint on save
 Pick a unit testing solution: Jest
 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
 Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置。

10.确定后,等待下载依赖模块

11.项目创建好后

cd project-name // 进入项目根目录
run serve // 运行项目

12.浏览器打开  http://localhost:8080

vue-cli3.0 脚手架搭建项目的过程详解

总结

以上所述是小编给大家介绍的vue-cli3.0 脚手架搭建项目的过程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 #Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 #Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 #Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 #Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 #Javascript
clipboard在vue中的使用的方法示例
Oct 19 #Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 #Javascript
You might like
PHP脚本数据库功能详解(中)
2006/10/09 PHP
PHP多个版本的分析解释
2011/07/21 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
php源码的安装方法和实例
2019/09/26 PHP
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Vue实现简单分页器
2018/12/29 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
分享python数据统计的一些小技巧
2016/07/21 Python
关于Python的一些学习总结
2018/05/25 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
高一军训的心得体会
2014/09/01 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL