如何使用 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中的自定义指令
Dec 07 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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反转字符串函数strrev()函数的用法
2012/02/04 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
对python模块中多个类的用法详解
2019/01/10 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python解析多层json操作示例
2019/12/30 Python
python 深度学习中的4种激活函数
2020/09/18 Python
python 下载文件的几种方法汇总
2021/01/06 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
北承题目(C++)
2012/05/16 面试题
怎样从/向数据文件读/写结构
2014/11/23 面试题
行政专员岗位职责
2014/01/02 职场文书
小学毕业感言150字
2014/02/05 职场文书
生产部岗位职责范文
2014/02/07 职场文书
会计学自荐信
2014/06/03 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
放飞理想演讲稿
2014/09/09 职场文书
离婚协议书格式
2015/01/26 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis