1、安装node

node.js环境(npm包管理器)
cnpm npm的淘宝镜像

从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功。

npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息。

2、安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org

3、安装webpack
npm install webpack -g//配置全局的webpack

4、安装Vue2.0

cnpm install vue

5.安装vue-cli 脚手架工具

cnpm install --global vue-cli

6.在某个目录下,创建一个基于 webpack 模板的新项目

vue init webpack my-project
//my-project是你的项目名

7.安装依赖

cd my-project //到项目目录下
cnpm install //安装依赖
不应用ESLint
创建webpack模板项目时,如果你对ES6和ESLint不是很熟的话我个人不建议你应用它,因为要求比较严格,所以一不小心就报错,导致整个项目运行不起来,对于初学很痛苦。
这里写图片描述

8.运行新创建的vue项目

npm run dev

运行之后会看到vue的初始页面效果,如下图,说明你就成功搭建了一个vue项目。(下面框出来的是官方提供的插件和awesome,很实用)
这里写图片描述

参考原文:http://blog.csdn.net/u013778905/article/details/53861153

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )的更多相关文章

  1. Vue.js系列之项目搭建

    项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...

  2. Vue.js系列之项目搭建(1)

    项目搭建具体步骤如下: 1.安装node 到官网下载安装,我这里是win7系统. (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装 ...

  3. Vue.js学习笔记--菜鸟搭建一个企业级vue的项目

    vue.js新手搭建一个企业项目,从0开始 前置条件: node.npm请先安装配置好 下面开始: npm 下载vue-cli脚手架工具  确认安装成功看到版本号: 初始化项目,选用webpack(p ...

  4. Vue.js系列之项目结构说明

    转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...

  5. Vue.js vui 饿了么Vue2.0的组件库

    http://www.oschina.net/news/78038/vue-js-2-0-3 http://git.oschina.net/durcframework/vui http://eleme ...

  6. 从零开始搭建Vue2.0项目(一)之快速开始

    从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...

  7. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  8. [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

    在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...

  9. 【前端】Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

随机推荐

  1. Python全栈开发:基本数据类型

    1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2 ...

  2. 工作中遇到的bug

    1. Error: No PostCSS Config found in.. 在项目根目录新建postcss.config.js文件,并对postcss进行配置: module.exports = { ...

  3. CPU中的主要的寄存器

    寄存器 名为寄存器的存储电路. 8种16位寄存器 AX accumulator 累加寄存器 CX counter 计数寄存器 DX data 数据寄存器 BX base 基址寄存器 SP stack ...

  4. Java-Druid:目录

    ylbtech-Java-Druid:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://yl ...

  5. LINK : fatal error LNK1104: 无法打开文件“ucrtd.lib”

    先说解决方案: 选中项目->右键->属性->常规 -->Windows SDK     改成当前系统的SDK版本,我这边是10.0.15063.0,重新生成即可 下载cefsh ...

  6. SpringIOC注入模块中xml文件导入其他xml文件配置

    如果我们在spring框架中配置了多个xml文件,我们可以在读取配置文件的时候把这些xml文件一下全都读取 也可以只读一个总的xml文件,在这个总的xml文件中把其他的xml全都都导入进来. 例如: ...

  7. Django的日常-视图层

    目录 Django的日常-3 JsonResponse form表单上传文件 CBV的源码分析 视图层 模板传值 过滤器 标签 自定义过滤器和标签 Django的日常-3 JsonResponse 在 ...

  8. springboot+atomikos+多数据源管理事务(mysql 8.0)

    jta:Java Transaction API,即是java中对事务处理的api 即 api即是接口的意思 atomikos:Atomikos TransactionsEssentials 是一个为 ...

  9. Java实现对日期上旬中旬下旬格式化

    PS:我数据库表定义的日期是String类型,要求对读取的日期进行格式化为xx年xx月上\中\下旬 测试代码如下 package day1; import java.text.ParseExcepti ...

  10. 【ZJOI2007】【BZOJ1059】矩阵游戏 匈牙利算法

    题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换 ...