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
├──  debug@2.2.0 ( ms@0.7.1)
└──  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'
    }
})
项目结构图:

结果:

Logo

前往低代码交流专区

更多推荐