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创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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绘图技术
2013/07/03 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
使用Python实现博客上进行自动翻页
2017/08/23 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
演讲稿怎么写
2014/01/07 职场文书
团队精神口号
2014/06/06 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
预备党员入党感想
2015/08/10 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
gateway网关接口请求的校验方式
2021/07/15 Java/Android
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Go语言入门exec的基本使用
2022/05/20 Golang