如何使用 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-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
MSN消息提示类
2006/09/05 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
Javascript复制实例详解
2016/01/28 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python网络编程实例简析
2014/09/26 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
python实现图片识别汽车功能
2018/11/30 Python
Python 串口读写的实现方法
2019/06/12 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python中删除某个元素的方法解析
2019/11/05 Python
商务经理岗位职责
2014/08/03 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
新店开张宣传语
2015/07/13 职场文书
高考升学宴主持词
2019/06/21 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Golang流模式之grpc的四种数据流
2022/04/13 Golang