详解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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
解决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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP与以太坊交互详解
2018/08/24 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
jQuery链使用指南
2015/01/20 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
简单的python后台管理程序
2017/04/13 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python时间time模块处理大全
2020/10/25 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
旅游安全协议书
2014/04/21 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
毕业生政审意见范文
2015/06/04 职场文书
天气温馨提示语
2015/07/14 职场文书
社区服务活动感想
2015/08/11 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
Python Pandas常用函数方法总结
2021/06/15 Python