详解Vue使用 vue-cli 搭建项目


Posted in Javascript onApril 20, 2017

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli

 一、 安装 node.js

首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

详解Vue使用 vue-cli 搭建项目

 二、安装 vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:

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

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

同样可以使用 cnpm -v 查看是否安装成功

详解Vue使用 vue-cli 搭建项目

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

详解Vue使用 vue-cli 搭建项目

如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

 三、生成项目

首先需要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

详解Vue使用 vue-cli 搭建项目

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

然后启动项目

npm run dev

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

 详解Vue使用 vue-cli 搭建项目

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

四、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网上抓的一个特效
May 11 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
解决AngualrJS页面刷新导致异常显示问题
Apr 20 #Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 #Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 #Javascript
Vue如何引入远程JS文件
Apr 20 #Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
You might like
UCenter Home二次开发指南
2009/05/28 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
jQuery中prev()方法用法实例
2015/01/08 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
全面了解js中的script标签
2016/07/04 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
koa-router源码学习小结
2018/09/07 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
javascript实现日历效果
2019/06/17 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
jQuery实现购物车全功能
2021/01/11 jQuery
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
护理不良事件检讨书
2014/02/06 职场文书
高三学习决心书
2014/03/11 职场文书
公司感谢信范文
2015/01/22 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python