vue cli 3.0 搭建项目的图文教程


Posted in Javascript onMay 17, 2019

1.3.0版本包括了默认预设配置和用户自定义设置

2.对比2.0来看3.0的目录结构更加精简了

移除了配置文件目录 (config 和 build文件夹)

移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件

vue-cli 3.0 搭建

1. 安装或升级 Node.js

  • vue-cli官网对于node版本有明确要求
  • Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

2.安装 vue-cli 3.0

npm install -g @vue/cli
在这里需要注意的是如果你已经全局安装了旧版的 vue-cli(1.x或2.x) 
vue-cli 官网有提到 你需要通过
npm uninstall vue-cli -g 或者 yarn global remove vue-cli
来卸载它。

vue-cli脚手架搭建

vue create hello-world (搭建一个项目名称为 hello-world 的vue前端项目)

项目配置选项

a、Manually select features

vue cli 3.0 搭建项目的图文教程

如果是第一次用3.0的话没有第一个选项(myProjectinit - 这是自己预设的配置),
只有最后两个,第一个是默认配置,一般选第二个,自己配置,这里选第二个。

b、选择项目需要的特性 (根据自己需求选择即可)

vue cli 3.0 搭建项目的图文教程

此处选择的是:Babel编译、Vue路由、Vue状态管理器、CSS预处理器、代码检测

c、router是否使用history模式,这里使用history模式

vue cli 3.0 搭建项目的图文教程

选择 Y
对于一般的Vue+Vue-router+Webpack的Web开发场景,用history模式即可

d、选择CSS预处理器语言

vue cli 3.0 搭建项目的图文教程

选择第二个 Sass/SCSS (with node-sass)

e、选择ESLint的代码规范,此处使用 Standard代码规范

vue cli 3.0 搭建项目的图文教程 

Standard标准,它是一些前端工程师自定的标准。

f、何时进项代码监测

vue cli 3.0 搭建项目的图文教程

选择在保存时,进项监测

g、Babel、PostCss、ESLint等文件的存放位置

vue cli 3.0 搭建项目的图文教程

选择单独保存在各自的配置文件中

h、询问是否将此配置项保存为,预设配置(第一步看到的 myProjectinit 即为我保存的一个预设配置)

vue cli 3.0 搭建项目的图文教程

这里我选择的是不保存 N 需要保存的选择 Y 即可

i、最后等待vue-cli完成初始化即可

vue cli 3.0 搭建项目的图文教程 
vue cli 3.0 搭建项目的图文教程

项目目录结构如下图:

vue cli 3.0 搭建项目的图文教程

此处即为初始化完成
cd 到此目录下运行 
npm run serve 
启动项目
serve启动不习惯,可手动打开根目录下的package.json文件
找到 "serve": "vue-cli-service serve" 把 serve 改为 dev
vue-cli 3.0还提供了 UI控制台 来进项项目的管理
安装 npm i -g @vue/cli
在终端执行 vue ui 会默认初始化 localhost:8000 且自动打开

对于 vue-cli 3.0 的 UI控制台 可视化项目管理界面介绍此文有介绍 vue-cli改版 3.0betaUI界面初体验。

总结

以上所述是小编给大家介绍的vue cli 3.0 搭建项目的图文教程 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js中设置元素class的三种方法小结
Aug 28 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
js创建对象的方法汇总
Jan 07 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 #Javascript
tsconfig.json配置详解
May 17 #Javascript
小程序云函数调用API接口的方法
May 17 #Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 #Javascript
微信小程序云开发之使用云函数
May 17 #Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
微信小程序云开发之使用云数据库
May 17 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
php学习 字符串课件
2008/06/15 PHP
PHP 文件类型判断代码
2009/03/13 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
应届生.NET方向面试题
2015/05/23 面试题
幼师自荐信
2013/10/26 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
高中班主任评语
2014/12/30 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android