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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
javascript cookie的简单应用
Feb 24 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
vue router 动态路由清除方式
May 25 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python调用C语言的实现
2019/07/26 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
劲霸男装广告词
2014/03/21 职场文书
终止合同协议书
2014/04/17 职场文书
党性观念心得体会
2014/09/03 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python