一:最简单的坏境搭建开始:

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

这里需要说明下,因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。

2、安装淘宝镜像,打开命令行工具,把这个(npm install -g cnpm --registry= registry.npm.taobao.org)复制(这里要手动复制就是用鼠标右键那个,具体为啥不多解释),安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。

3、安装webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。

4、安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

二、通过以上四步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目

  1. 在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:①cd 目录路径 ②如果以安装git的,在相关目录右键选择Git Bash Here
  2. 安装vue脚手架输入:vue init webpack exprice ,注意这里的“exprice” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
如下图:

3、cd 命令进入创建的工程目录,首先cd exprice(这里是自己建工程的名字);

4、安装项目依赖:npm install,因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库),但是但是如果真的安装“个把”小时也没成功那就用:cnpm install 吧

5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource,输入:cnpm install vue-router vue-resource --save。

创建完成的“exprice”目录如下:

简单的说明下各个目录都是干嘛的:

6、启动项目,输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:

转载于:https://juejin.im/post/5b0295706fb9a07abc2a38fd

搭建Vue2.0脚手架(vue-cli)相关推荐

  1. 【Vue2.0】—Vue脚手架配置代理(二十二)

    [Vue2.0]-Vue脚手架配置代理(二十二) 方法一 方法二

  2. VUE学习-脚手架vue cli(六)

    一.脚手架vue cli 官网文档:https://cli.vuejs.org/zh/guide/ A)安装vue/cli 1.使用以下命令安装: npm install -g @vue/cli # ...

  3. 【Vue2.0】—Vue与Component的关系(十二)

    [Vue2.0]-Vue与VueComponent的关系(十二) <body><div id="root"><h2>{{name}}</h ...

  4. 【Vue2.0】—Vue监视数据的原理(五)

    [Vue2.0]-Vue监视数据的原理(五) <body><div id="root"><h1>学生的基本信息</h1><bu ...

  5. 【Vue2.0】—Vue中的key有什么作用?(四)

    [Vue2.0]-Vue中的key有什么作用?(四) <div id="root"><!-- 遍历数组 --><ul><button @c ...

  6. 从零开始搭建vue2.0+elementUi 后台管理系统 一项目搭建

    文章目录 前言 一.全局安装vue-cli 二.创建vue项目 1.用命令来创建vue项目 三.运行项目 1.项目目录解读 一.项目全局引入element ui 总结 写文初衷 前言 在开始之前,首先 ...

  7. 【Vue】脚手架 Vue CLI 的使用

    安装脚手架 npm install @vue/cli -g 脚手架2npm install @vue/cli-init -g 脚手架2初始化项目:vue init webpack my-project

  8. Vue2.0 脚手架代码详解

    参考作者:https://www.jianshu.com/p/2b661d01eaf8 只是为了方便个人学习. 来看一下脚手架创建后的项目目录  说明:在*.vue文件,template标签里写htm ...

  9. vue2.0 创建vue项目步骤

    1.提前安装好node 2.可以cmd在自带的命令行中运行,也可以在编辑器中运行 cnpm npm install -g cnpm --registry=https://registry.npm.ta ...

最新文章

  1. Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem G. k-palindrome dp
  2. css中“[]”、“”“~”、“,”、“+”和“”详解
  3. 事件ID 6038审核NTLM使用情况
  4. 成功解决‘nvidia-smi‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
  5. Caffe学习笔记3——制作并训练自己的数据集
  6. linux 监控命令行输入,监控 Linux 容器性能的命令行神器
  7. pg数据库开启远程连接_Postgresql开启远程访问的步骤全纪录
  8. 10 亿产业基金加持,让精准定位在物联网应用中实现无限可能!
  9. 用python做简单的题目_「每日一练」巧用python做小学的数学题
  10. 学土木结构考计算机等级考试,请教各位,我是学土木的,考计算机二级的哪个比较好?...
  11. 使用plsql管理oracle数据库连接,使用PLSQL连接远程oracle数据库
  12. IMG镜像写盘工具physdiskwrite,用于MikroTik RouterOS的安装(Windows)
  13. mysql8.0.25安装配置教程(windows 64位)最详细
  14. xp计算机限制打开u盘,XP系统无法读取u盘的解决设置方法
  15. js去除字符串中的空白字符(也可以去除其他字符串)
  16. MATLAB 残差分析
  17. 7.ROS编程学习:自定义服务数据c++调用
  18. hive 计算个人的累计金额占比
  19. 一篇文章带你了解网络编程(总结)
  20. Python 入门 26 —— ASCII 编码、Unicode 编码、 UTF-32、 UTF-16、 UTF-8、 GB2312 编码、 GBK 编码

热门文章

  1. 蓝桥杯 ADV-181 算法提高 质因数2
  2. 【note】Head First Java笔记
  3. 遍历删除List中的元素,会报错? 用iterator.remove() 完美解决
  4. oracle的一些操作
  5. shell脚本连接、读写、操作mysql数据库实例
  6. SQL语句常用优化技巧
  7. Squid服务器配置
  8. CentOS中用yum安装Nginx
  9. What’s the difference between system.web and system.webServer?
  10. Linux 命令(111)—— alias 命令(builtin)