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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
图解js图片轮播效果
2015/12/20 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python学习资料
2007/02/08 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python2.7安装图文教程
2018/03/13 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python中join()方法介绍
2018/10/11 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
元旦晚会主持词开场白
2015/05/28 职场文书
旅游投诉信范文
2015/07/02 职场文书
《山中访友》教学反思
2016/02/24 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android