如何使用 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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue实现在data里引入相对路径
Jun 05 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
APMServ使用说明
2006/10/23 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
javascript实现表单验证
2016/01/29 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python之reload流程实例代码解析
2018/01/29 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python 实现字符串下标的输出功能
2020/02/13 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
局域网定义和特性
2016/01/23 面试题
简历中自我评价怎么写
2014/02/12 职场文书
读书之星事迹材料
2014/05/12 职场文书
2014年安全生产责任书
2014/07/22 职场文书
村党组织公开承诺书
2015/04/30 职场文书
大学军训口号大全
2015/12/24 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server