从零开始系列之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全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...
随机推荐
- Idea 调试代码
---恢复内容开始--- set DEBUG_PORT=8787 set JAVA_DEBUG=-Xdebug -Xnoagent -Xrunjdwp:transport=dt_socket,addr ...
- 网络推广 免费推广产品网站 B2B网站如何推广
云集网(yunjinet.com)免费发布各类服务和产品信息,在平台上推广你的产品.帮助商家推广优质的产品和服务.如何提高信息的点击量为了提高分类信息网的信息质量,对重复度高.相似度高的信息进行了过滤 ...
- C语言函数嵌套调用作业总结
成绩管理系统作业小结 devc中出现"ID Return"问题,我帮很多同学看完后发现,大部分还是自身程序问题,如全局变量大小写错误.没有添加c文件进工程等等.所以对于" ...
- alpha冲刺总结随笔
前言:前面乱乱糟糟整了一路,到最后终于可以稳定下来了.安安心心做个总结,然后把之后要做的事情都理清楚好了. 新学长似乎是个正经[并不]大腿. 看起来也不用都是一个人或者跟陈华学长两个人对半开了[突然摸 ...
- 从0开始的LeetCode生活—9. Palindrome Number(回文数)
题目大意: 判断输入的数字是不是回文数.所谓回文数就是正反读都一样的数字,比如说11,121,1221这样子的数字.负数不会是回文数. 解题思路: 思路一:如果这个数是负数,则返回false,否则用一 ...
- caffe实现GAN
我实现GAN网络结构比较复杂: 通过建立两个一模一样的网络,他们相对应的层共享权重,一个网络用来跟新D model另一个网络用来更新G model 更新G model的网络,D部分只进行梯度传递,不进 ...
- 09-TypeScript中的继承
在后端开发语言中,继承是非常重要的概念,继承可以让子类具有父类的成员和方法,通过实例化子类,就可以访问父类的成员和方法. 在JavaScript中,需要通过原型模式来模拟继承的实现.而在TypeScr ...
- 一个诚实的孩纸选Python的原因
我之所以会选择python语言程序设计这门课,是因为我一开始预选选的选修课都没选上,然后在补选的时候,在别人选剩的课里面选择了python. 上了两节课之后,我发现python还挺有意思的,挺喜欢py ...
- ( 转 ) 聊一聊C#的Equals()和GetHashCode()方法
聊一聊C#的Equals()和GetHashCode()方法 博客创建一年多,还是第一次写博文,有什么不对的地方还请多多指教. 关于这次写的内容可以说是老生长谈,百度一搜一大堆.大神可自行绕路. ...
- 从感知机到 SVM,再到深度学习(一)
在上篇博客中提到,如果想要拟合一些空间中的点,可以用最小二乘法,最小二乘法其实是以样例点和理论值之间的误差最小作为目标.那么换个场景,如果有两类不同的点,而我们不想要拟合这些点,而是想找到一条 ...