win上安装vuecli

一、安装node.js
安装node.js,Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。
二、安装npm
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功

C:UsersAdministrator>npm -v
5.6.0

三、安装vue-cil，vue-cil是vue的脚手架工具
其模板可以通过 vuejs-templates来查看。
安装命令如下：

npm install -g vue-cli

四、检验安装

控制台输入：vue

五、查看可以使用模板

控制台输入：vue list
就会到展示模板：

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

六、我们来用vue-cil构建一个项目
首先，我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在E:vue这个目录下面，那么先通过cmd命令进入这个目录，命令如下

f:>cd /潭州学院vue学习resource

进入到目录之后，我们按照下面的代码输入，新建一个自己的vue项目stuDemo

f:潭州学院vue学习resource>vue init webpack stuDemo

'git' ڲⲿҲǿеij
ļ
? Project name y
? Project description study
? Author chenjh
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "stuDemo".

# Project initialization finished!
# ========================

To get started:

  cd stuDemo
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

说明我们构建目录已经成功了。

说明：

cd 目录(你要把项目放在哪个目录)；
vue init webpack pname(你的项目名字)；
? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
? Author (xhdx ) ；zhuming3834@sina.com(项目作者)；
? Vue build 
❯ Runtime + Compiler: recommended for most users 
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
这里选择Runtime + Compiler: recommended for most users；
? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；
? Pick an ESLint preset (Use arrow keys) 
❯ Standard (https://github.com/feross/standard) 
Airbnb (https://github.com/airbnb/Javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard)
? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
cd pname(项目目录)；
npm install 安装依赖；
npm run dev 本地运行项目

七、进入到项目

f:潭州学院vue学习resource>cd stuDemo

八、安装依赖

npm install

以上安装超级慢，那么我们改另外一种方法安装
淘宝镜像cnpm安装命令：“ npm install cnpm -g ” 全局安装cnpm

npm install cnpm -g

cnpm -v查看版本，如果提示“ cnpm不是内部或外部命令，也不是可运行的程序或批处理文件 ”
原因是没有在本机系统添加环境变量，所以系统识别不了该指令
解决方法就是在环境变量里添加cnpm的安装路径 一般默认路径为：C:UsersAdministratorAppDataRoamingnpm; （这是我的安装路径，具体视你的安装路径为准）
然后执行以下命令安装依赖：

cnpm install

安装完之后项目会多一个node_modules文件夹
九、安装完成之后再运行命令

npm run dev

在浏览器中就可以看到如下图：

了解package.json 里面的dependencies和devDependencies的区别：超链接