Vue基本环境搭建

Vue基本环境的搭建，可能写的没那么明了，里面有很多无关的东西，例如C:\Users\jaky>这些，每个人的机器都可能不一样。所以。 读者需要耐心点（sorry），了解命令即可

// 这里是安装淘宝的npm镜像，国外的npm对网络要求较高

C:\Users\jaky>npm install -g cnpm --registry= http://r.cnpmjs.org ( https://registry.npm.taobao.org 不可用)

npm WARN deprecated  has-color@0.1.7: Renamed to supports-color. If you're using chalk, upgrade to the latest version.  https://github.com/chalk/supports-color

E:\Program Files\nodejs\node_global\cnpm -> E:\Program Files\nodejs\node_global\node_modules\cnpm\bin\cnpm

cnpm@4.4.0 E:\Program Files\nodejs\node_global\node_modules\cnpm

├──  npm-request@1.0.0

├──  auto-correct@1.0.0

├──  giturl@1.0.0

├──  open@0.0.5

├──  bagpipe@0.3.5

├──  colors@1.1.2

├──  commander@2.9.0 ( graceful-readlink@1.0.1)

├──  debug@2.2.0 ( ms@0.7.1)

├──  cross-spawn@0.2.9 ( lru-cache@2.7.3)

├──  urllib@2.17.0 ( content-type@1.0.2,  statuses@1.3.0,  humanize-ms@1.2.0,  iconv-lite@0.4.13,  any-promise@1.3.0,  digest-header@0.0.1,  default-user-agent@1.0.0)

├──  npminstall@2.9.4 ( node-homedir@0.0.1,  destroy@1.0.4,  binary-mirror-config@1.1.0,  await-event@1.0.0,  runscript@1.1.0,  bytes@2.4.0,  co@4.6.0,  ms@0.7.1,  semver@5.3.0,  normalize-git-url@3.0.2,  uuid@2.0.3,  node-uuid@1.4.7,  minimist@1.2.0,  co-parallel@1.0.0,  utility@1.8.0,  cmd-shim@2.0.2,  npm-package-arg@4.2.0,  mkdirp@0.5.1,  chalk@1.1.3,  mz@2.4.0,  ora@0.3.0,  tar@2.2.1,  co-fs-extra@1.2.1,  rimraf@2.5.4,  moment@2.15.1,  node-gyp@3.4.0)

└──  npm@3.10.9

C:\Users\jaky>cnpm -v

4.4.0

C:\Users\jaky>cnpm install -g vue  //-g是全局安装的意思（安装在系统node的安装目录下），不加会在单前目录下安装

√ All packages installed (1 packages installed from npm registry, use 2s, speed 94.31kB/s, json 1(8.98kB), tarball 183.33kB)

C:\Users\jaky>cnpm install -g vue-cli

deprecate  vue-cli@2.4.0 ›  metalsmith@2.2.0 ›  recursive-readdir@1.3.0 ›  minimatch@0.3.0 Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

√ All packages installed (381 packages installed from npm registry, use 15s, speed 532.4kB/s, json 792(3.96MB), tarball 3.78MB)

Recently updated (since 2016-10-16): 5 packages (detail see file node_modules/.recently_updates.txt)

C:\Users\jaky>vue

  Usage: vue <command> [options]

  Commands:

    init        generate a new project from a template

    list        list available official templates

    help [cmd]  display help for [cmd]

  Options:

    -h, --help     output usage information

    -V, --version  output the version number

E:\>cd ALLWorkspace

E:\AllWorkspace>cd vue

E:\AllWorkspace\vue>vue init webpack my-first-vue-project  //创建一个基于webpack模板的项目

  This will install Vue 2.x version of template.

  For Vue 1.x use: vue init webpack#1.0 my-first-vue-project

? Project name my-first-vue-project

? Project description this is jaky first vue project

? Author jaky

? Vue build standalone

? Use ESLint to lint your code? Yes //这里直接no 吧

? Pick an ESLint preset Standard

? Setup unit tests with Karma + Mocha? No

? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "my-first-vue-project".

   To get started:

     cd my-first-vue-project

     npm install

     npm run dev

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

E:\AllWorkspace\vue>cd my-first-vue-project

E:\AllWorkspace\vue\my-first-vue-project>dir

 驱动器 E 中的卷是 Jaky

 卷的序列号是 0009-20BE

 E:\AllWorkspace\vue\my-first-vue-project 的目录

2016/10/23  13:52    <DIR>          .

2016/10/23  13:52    <DIR>          ..

2016/10/23  13:52                96 .babelrc

2016/10/23  13:52               147 .editorconfig

2016/10/23  13:52                23 .eslintignore

2016/10/23  13:52               559 .eslintrc.js

2016/10/23  13:52                44 .gitignore

2016/10/23  13:52    <DIR>          build

2016/10/23  13:52    <DIR>          config

2016/10/23  13:52               208 index.html

2016/10/23  13:52             1,528 package.json

2016/10/23  13:52               405 README.md

2016/10/23  13:52    <DIR>          src

2016/10/23  13:52    <DIR>          static

               8 个文件          3,010 字节

               6 个目录 65,676,701,696 可用字节

E:\AllWorkspace\vue\my-first-vue-project>cnpm install

/ Installing  sha.js@2.2.6platform unsupported  webpack@1.13.2 ›  watchpack@0.2.9 ›  chokidar@1.6.1 ›  fsevents@1.0.14 Package require os(darwin) not compatible with your platform(win32)

- Installing  sha.js@2.2.6[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)

√ All packages installed (613 packages installed from npm registry, use 32s, speed 498.98kB/s, json 1418(7.27MB), tarball 8.14MB)

Recently updated (since 2016-10-16): 16 packages (detail see file node_modules/.recently_updates.txt)

  Today:

    →  css-loader@0.25.0 ›  cssnano@3.7.7 ›  postcss-normalize-url@3.0.7 ›  normalize-url@1.7.0 (02:08:26)

    →  eslint-plugin-html@1.5.4 (01:09:56)

E:\AllWorkspace\vue\my-first-vue-project>npm run dev

>  my-first-vue-project@1.0.0 dev E:\AllWorkspace\vue\my-first-vue-project

> node build/dev-server.js

结构：

结果：

当然，还有可以直接使用下载好的js,直接在网页中引用即可

如：

index.html: 

<div id="app">

  {{ message }}

</div>

<script src="../js/vue.min.js"></script>

<script src="../js/vue-resource.min.js"></script>

<script src="../js/index.js"></script>

index.js:

var vm = new Vue({

    el: '#app',

    data: {

        message: 'keep learning'

    }

})

项目结构图：

结果：