使用vue-cli创建项目的图文教程(新手入门篇)


Posted in Javascript onMay 02, 2018

本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间。

使用npm 与vue-cli 构建vue 项目

第一步:安装运行环境(node与npm)

nodeJ官网:http://nodejs.cn/下载安装包( 安装)

安装完成后,需要检测是否安装成功

使用命令行cmd 打开dos 黑窗口,运行 node -v 和 npm ?v,出现版号说明安装成功

使用vue-cli创建项目的图文教程(新手入门篇)

注(npm 是node自带的,在安装node时已经安装了)

如何升级npm 的版本呢?很简单

执行命令:npm i ?g to update (全局安装:建议) 或者npm install ?g npm

第二步:安装脚架手 vue-clic

安装vue-cli 有两种安装途径(npm 与 cnpm),二选一

(1) 使用npm 安装vue-cli,全局安装 (该方式安装比较慢,国外镜像)

运行:npm install g vue ?cli

(2) 使用cnpm ( 国内淘宝镜像)安装vue-cli

(2.1) 首先要注册cnpm

运行:npm install -g cnpm --registry=https://registry.npm.taobao.org

使用vue-cli创建项目的图文教程(新手入门篇)

(2.2) 检测 cnpm 是否安装成功,出现版本说明安装成功

运行:cnpm -v

使用vue-cli创建项目的图文教程(新手入门篇)

(2.3)使用cnpm 安装脚架手vue-cli

运行:cnpm install ?g vue-cli

使用 vue ?V(注意:大写V)查看是否安装成功

运行:vue ?V

使用vue-cli创建项目的图文教程(新手入门篇)

第三步 :正式开始创建项目

1.使用 命令:cd目录路径 ,进入到你指定的创建项目的路径下

如:

使用vue-cli创建项目的图文教程(新手入门篇)

2. 使用 vue init webpack 初始化项目

运行:vue init webpack myfilst-vueproject(自定义文件目录名称)

一般默认,直接回车就可以了

使用vue-cli创建项目的图文教程(新手入门篇)

在目前为止,已创建好一个vue 的项目,目录结构如:(结构详解看官网)

使用vue-cli创建项目的图文教程(新手入门篇)

3.按照提示运行流程,在当前项目的目录下安装模块

运行: cd 项目名称

运行: npm install

使用vue-cli创建项目的图文教程(新手入门篇)

正在安装模块依赖。。。。

模块安装完成,项目根目录下多一个文件夹

使用vue-cli创建项目的图文教程(新手入门篇)

 第四步:启动/运行项目

 运行:npm run dev

 成功运行,默认效果如:

使用vue-cli创建项目的图文教程(新手入门篇)

如果没有显示正常的页面,看是否端口是否被占用,默认运行端口为8080,

项目根目录下 ->config->index.js

使用vue-cli创建项目的图文教程(新手入门篇)

修改该端口值,重新运行:npm run dev

每次修改配置文件都要重新运行

第五步:打包上线

运行:npm run build

 打包完成后,会在根目录下生成一个dis 的文件夹,可以在本地打开浏览,项目上线时,只需将dis 文件夹放在服务器即可

总结

以上所述是小编给大家介绍的使用vue-cli创建项目的图文教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
React如何创建组件
Jun 27 Javascript
vue中的模态对话框组件实现过程
May 01 #Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 #Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 #Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 #Javascript
如何获取TypeScript的声明文件.d.ts
May 01 #Javascript
Vue项目中使用Vux的安装过程
May 01 #Javascript
在Vue项目中使用d3.js的实例代码
May 01 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
用 PHP5 轻松解析 XML
2006/12/04 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
实例解析Array和String方法
2016/12/14 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python中的random()方法的使用介绍
2015/05/15 Python
Python多线程下载文件的方法
2015/07/10 Python
Python线性回归实战分析
2018/02/01 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
如何通过命令行进入python
2020/07/06 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
毕业生自我推荐
2013/11/04 职场文书
客服工作职责
2013/12/11 职场文书
优秀干部获奖感言
2014/01/31 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers