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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
js实现双人五子棋小游戏
May 28 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
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字符串替换函数substr_replace()用法实例
2015/03/17 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
js实现3D旋转效果
2020/08/18 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
PyTorch中的C++扩展实现
2020/04/02 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
本科毕业生求职自荐信
2014/02/03 职场文书
工作会议主持词
2014/03/17 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
师德师风学习材料
2014/12/19 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
员工升职自我评价
2019/03/26 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android