从零开始系列之vue全家桶(1)安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router
写在前面:
什么是全家桶?
包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https://github.com/pagekit/vue-resource)。再加上构建工具vue-cli,sass/less样式,就是一个完整的vue项目的核心构成。
概括起来就是:、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。
其他:axios是一个http请求包,vue官网推荐使用axios进行http调用。
1.安装nodejs。
Node.js官方安装包及源码下载地址:http://nodejs.org/download/
一路next,安装完毕。
1.命令行操作:win+r键调出运行,输cmd调出命令行。
2.检查Node.js版本看是否安装成功:输入node -v。
2.将淘宝镜像cnpm安装,解决npm外国安装过慢问题。
1.打开命令行,输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
-g和-global同样都是全局的意思,以后再有新项目都不用再重复操作安装依赖了。安装好以后用cnpm 替代所有npm命令。
(可以简写为cnpm i -g cnpm --registry=https://registry.npm.taobao.org
,这里的i就是指的install,以后不再赘述)
如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存。
同样可以使用 cnpm -v 查看是否安装成功。
3.使用 cnpm 安装 vue-cli 脚手架和 webpack。最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack。
cnpm install -g vue-cli
安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本
4.初始化项目
vue init webpack 项目名称
比如在桌面shift右键调出命令行,输入vue init webpack my-vue ,然后一路回车过去,会默认自动安装vue-router,行使ESLint规范等。
5.然后进入项目目录,使用 cnpm 安装依赖
cd my-vue
cnpm i
然后启动项目 npm run dev
浏览器打开输入:http://localhost:8080
6自己的项目文件都需要放到 src 文件夹下
7.项目开发完成之后,可以进行打包工作
npm run build
打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看
项目上线时,只需要将 dist 文件夹放到服务器就行了。
从零开始系列之vue全家桶(1)安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router的更多相关文章
- vue全家桶(vue2.x+vue-router+axios+webpack)项目搭建
参考博客文章 博主FungLeo的Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版 注:原博主写的非常详细 本文章为根据原博主教程总结的自己的搭建流程 一.安装n ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- Nuxt + Vue 全家桶
引子 情由无中有,一旦有了,便万劫不复 简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建 ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue 全家桶单元测试简要指南
此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. vue 的单元测试环境 按照目前全家桶的情况,是需要 webpack 的支持的.可以直接使用 vue-cli ...
- Vue全家桶高仿小米商城
大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...
随机推荐
- 一个shell脚本,让你的linux命令行酷炫起来
可调用如下函数达到echo出来带颜色的文字.._echo_error() { echo -ne "\033[31;1m $1\033[0m\n";}_echo_ok() { ech ...
- APP专业的开发公司都有这样一套开发流程,强烈建议收藏!
下面让我们来剖析到底是如何开发App的呢? 1.App界面设计开发: 通过客户提出需求,需要头脑风暴得出合适的方案和设计理念; 确认页面风格,确定整个界面的布局.关键截面的设计.文字.及其他的设计 G ...
- [Android]利用run-as命令在不root情况下读取data下面的数据
正文 一.关键步骤 主要是run-as命令: over@over-ThinkPad-R52:~$ adb shell $ run-as com.package $ cd /data/data/co ...
- DFA算法的简单说明!
1.DFA算法简介 DFA全称为:Deterministic Finite Automaton,即确定有穷自动机.其特征为:有一个有限状态集合和一些从一个状态通向另一个状态的边,每条边上标记有一个符号 ...
- Java虚拟机之性能监控
一.jstat:虚拟机统计信息监控工具监视虚拟机各种运行状态 图中,S0.S1(Survivor0.Survivor1)代表两个Survivor区,其中一个值为57.60%.另一个为0.E(Eden) ...
- 『开源重编译』System.Data.SQLite.dll 自适应 x86 x64 AnyCPU 重编译
背景: > System.Data.SQLite.dll 程序集 不能良好的支持 AngCPU 格式 System.Data.SQLite.dll 在 适应 x86 和 x64 有三个方案: & ...
- JAVA序列化基础知识
1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保 存object states, ...
- pop 一个viewController时候会有键盘闪现出来又消失
原因是alertview关闭影响了系统其他的动画导致的.要么延迟调用,要么自己做一个alertview. iOS 8.3,dismiss alert view时系统会尝试恢复之前的keyboard i ...
- 从PRISM开始学WPF(三)Prism-Region?
从PRISM开始学WPF(一)WPF? 从PRISM开始学WPF(二)Prism? 从PRISM开始学WPF(三)Prism-Region? 从PRISM开始学WPF(四)Prism-Module? ...
- New UWP Community Toolkit - AdaptiveGridView
概述 UWP Community Toolkit 中有一个自适应的 GridView 控件 - AdaptiveGridView,本篇我们结合代码详细讲解 AdaptiveGridView 的实现 ...