使用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 相关文章推荐
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
JS变量提升及函数提升实例解析
2020/09/03 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
GWebs公司笔试题
2012/05/04 面试题
酒店应聘自荐信
2013/11/09 职场文书
智能电子应届生求职信
2013/11/10 职场文书
大学生实习感言
2014/01/16 职场文书
学校十一活动方案
2014/02/01 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
客服部班长工作责任制
2014/02/25 职场文书
销售顾问工作计划书
2014/09/15 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
信用卡工资证明范本
2015/06/19 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技