如何使用 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中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
Vue3实现简易音乐播放器组件
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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
汽车维修专业个人求职信范文
2014/01/01 职场文书
护理中职生求职信范文
2014/02/24 职场文书
小学生操行评语
2014/04/22 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
工作试用期自我评价
2015/03/10 职场文书
员工工作心得体会
2019/05/07 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
golang中字符串MD5生成方式总结
2021/07/04 Golang
python_tkinter事件类型详情
2022/03/20 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android