详解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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
js实现倒计时关键代码
May 05 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
js实现查询商品案例
Jul 22 Javascript
vant自定义二级菜单操作
Nov 02 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
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
四种会话跟踪技术
2015/05/20 面试题
理财学专业自荐书
2014/06/28 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
清明扫墓感想
2015/08/11 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
销售口号霸气押韵
2015/12/24 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技