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触发radio或checkbox的change事件
Dec 18 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
js中call与apply的用法小结
Dec 28 Javascript
js获取视频时长代码
Apr 10 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
微信小程序实现简单的select下拉框
Nov 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
phpmyadmin的#1251问题
2006/11/25 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php工具型代码之印章抠图
2018/07/18 PHP
php中数组最简单的使用方法
2020/12/27 PHP
7个JS基础知识总结
2014/03/05 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
pycharm安装图文教程
2017/05/02 Python
Python探索之SocketServer详解
2017/10/28 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python2与Python3的区别点整理
2019/12/12 Python
python梯度下降算法的实现
2020/02/24 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
中学实习教师自我鉴定
2013/12/12 职场文书
访谈节目策划方案
2014/05/15 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
挂职个人工作总结
2015/03/05 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
导游词之大雁塔景区
2019/09/17 职场文书