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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
js获取url传值的方法
Dec 18 Javascript
js实现五星评价功能
Mar 08 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
vue 获取视频时长的实例代码
Aug 20 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
js实现烟花特效
2020/03/02 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Python中unittest用法实例
2014/09/25 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
Python 如何展开嵌套的序列
2020/08/01 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
工作过失检讨书
2014/02/23 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
全民创业工作总结
2015/08/13 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
php修改word的实例方法
2021/11/17 PHP
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技