如何使用 vue-cli 创建模板项目


Posted in Vue.js onNovember 19, 2020

场景

吾辈曾经只是个 Java 后端开发人员,原本对前端的了解大致只有 HTML/CSS/JavaScript/JQuery 级别,后来接触到了 nodejs。不仅是工作之需,吾辈个人而言也非常想要了解现代前端技术。然而天可怜见,吾辈刚入门 nodejs 并没有发现什么,但发现想要构建一个项目,需要用到前端工具链实在太多了。配置文件的数量甚至远远超过后端。
所以为了快速开发,入门之后遇到问题再去解决,吾辈选择了使用 nodejs + npm + vuejs + webpack + vscode 组合,使用 vue-cli 快速搭建一个基于现代前端工具链前端项目。

致那些想要了解前端但又不得其门的后端开发者,第一步的入门是最重要/最困难的。

步骤

前置要求

想要继续向下阅读的话请务必确认你的 PC 上已经正确安装了 nodejs/npm,如果还未曾安装,请参考 nodejs 官网 进行安装

npm 已经默认包含在 nodejs 中了

第一步:全局安装 vue-cli

打开命令行,安装 vue-cli

npm install -g @vue/cli

安装完成后在命令行输入 vue 应该会有类似于以下的输出

如何使用 vue-cli 创建模板项目

第二步:使用模板初始化一个项目

命令格式

# option 是选项,template 是使用的模板,app-name 是要初始化项目的名字
vue init [option] <template> <app-name>

例如我们使用 vue init webpack vue-webpack-example 初始化一个 webpack 模板的项目,大部分组件我们暂时还不需要,所以选择 vue-router 以及使用 npm 进行构建。

如何使用 vue-cli 创建模板项目

初始化完成后我们在命令行进入文件夹 vue-webpack-example 中,现在我们可以通过 npm run dev 启动开发服务器模式和 npm run build 打包项目为静态文件

尝试使用 npm run dev 运行项目,最后应该会得到如下输出

如何使用 vue-cli 创建模板项目

在浏览器打开链接 http://localhost:8080

如何使用 vue-cli 创建模板项目

第三步:初始化模板的一些坑

当你使用 npm run build 打包好静态文件在 dist 目录后,从文件管理器直接运行,却发现浏览器只有一片空白。

如何使用 vue-cli 创建模板项目

这是 vue-cli 默认模板的问题,具体原因与解决方案请参考 Vue 打包的静态文件不能直接运行

那么,这篇使用 vue-cli 简单的建立项目就到这里啦,希望各位后端开发者都能尝试有趣的现代前端呢 -(๑☆‿ ☆#)ᕗ

以上就是如何使用 vue-cli 创建模板项目的详细内容,更多关于vue-cli 创建模板项目的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue绑定class的三种方法
Dec 24 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
深入了解Vue3模板编译原理
Nov 19 #Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
详解Vue的mixin策略
Nov 19 #Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
You might like
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php上传图片类及用法示例
2016/05/11 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
javascript编写简易计算器
2017/05/06 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
VSCode下好用的Python插件及配置
2018/04/06 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
python一些性能分析的技巧
2020/08/30 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
数据库方面面试题
2012/04/22 面试题
西安众合通用.net笔试题
2013/03/18 面试题
保密承诺书范文
2014/03/27 职场文书
电教室标语
2014/06/20 职场文书
优秀党员先进材料
2014/12/18 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js