使用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 相关文章推荐
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
理解Koa2中的async&await的用法
Feb 05 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
印度网上药店:1mg
2017/10/13 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
寒假思想汇报
2014/01/10 职场文书
幼儿园开学寄语
2014/04/03 职场文书
读书活动总结范文
2014/04/26 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Go语言空白表示符_的实例用法
2021/07/04 Golang