使用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 相关文章推荐
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
JS原型与继承操作示例
May 09 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
原生JavaScript实现留言板
Jan 10 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
PHP 压缩文件夹的类代码
2009/11/05 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
python分析作业提交情况
2017/11/22 Python
Python决策树分类算法学习
2017/12/22 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
python中uuid模块实例浅析
2020/12/29 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
实习护士自我鉴定
2013/10/13 职场文书
安全教育实施方案
2014/03/02 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
劳动仲裁调解书
2015/05/20 职场文书
升学宴祝酒词
2015/08/11 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python