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获取当前页面的url网址信息
Jun 12 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
vue如何从接口请求数据
Jun 22 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python日志模块logging简介
2015/04/13 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python开发之文件操作用法实例
2015/11/13 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Python3.8中使用f-strings调试
2019/05/22 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python简单实现9宫格图片实例
2020/09/03 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
六十大寿答谢词
2014/01/12 职场文书
博士生专家推荐信
2015/03/25 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Python中的套接字编程是什么?
2021/06/21 Python