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调用asp.net 页面后台的实现代码
Apr 27 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
checkbox使用示例
Aug 23 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
Javascript图像处理思路及实现代码
2012/12/25 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
javascript常用函数(2)
2015/11/05 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
js实现中文实时时钟
2020/01/15 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
pytorch实现查看当前学习率
2020/06/24 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
为什么UNION ALL比UNION快
2016/03/17 面试题
法学专业个人求职信
2013/09/26 职场文书
运动会致辞稿50字
2014/02/04 职场文书
运动会方阵解说词
2014/02/12 职场文书
意向书范本
2014/07/29 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
2014年手术室工作总结
2014/11/26 职场文书
导游词幽默开场白
2019/06/26 职场文书
Python 图片添加美颜效果
2022/04/28 Python