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 相关文章推荐
JavaScript 是什么意思
Sep 22 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
使用axios实现上传图片进度条功能
Dec 21 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
js模拟实现烟花特效
Mar 10 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
微信小程序调用后台service教程详解
2020/11/06 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Python处理Excel文件实例代码
2017/06/20 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
请说出几个常用的异常类
2013/01/08 面试题
工程专业求职自荐书范文
2014/02/08 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers