安装使用vuejs

访问量: 3868

参考： http://vuejs.org.cn/guide/installation.html

先安装 nvm,  然后安装最新版本的 node  ( $ nvm use v6.2.1) ，我安装的是 6.2.1

再安装 vue 和  vue 的命令行：

$ cnpm install vue

$ cnpm install -g vue-cli --verbose

接下来，就可以创建vue 项目了：

sg552@siwei-i7-book:/workspace$ vue init webpack test-vue

? Project name test-vue
? Project description A Vue.js project
? Author Siwei < shensiwei@sina.com>
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "test-vue".

   To get started:
   
     cd test-vue
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

然后， 进入到项目中，发现package.json 也创建了。创建了不少 node package. 

所以我们要安装它：

$ cd test-vue
$ cnpm install --verbose (可以看到安装package的进程）

test-vue@1.0.0 /workspace/test-vue
├─┬ babel-core@6.9.1 
│ ├─┬ babel-code-frame@6.8.0 
│ │ └── js-tokens@1.0.3 
│ ├─┬ babel-generator@6.10.0 
│ │ ├─┬ detect-indent@3.0.1 
│ │ │ └─┬ repeating@1.1.3 
│ │ │   └── is-finite@1.0.1 
│ │ └── source-map@0.5.6 
│ ├── babel-helpers@6.8.0 
│ ├── babel-messages@6.8.0 
│ ├─┬ babel-register@6.9.0 
( 此处省略30屏）
    └─┬ lodash.toplainobject@3.0.0 
      ├── lodash._basecopy@3.0.1 
      └── lodash.keysin@3.0.8 

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.12
npm verb exit [ 0, true ]
npm info ok

然后，输入启动命令，发现就跑起来了：

sg552@siwei-i7-book:/workspace/test-vue$ npm run dev

> test-vue@1.0.0 dev /workspace/test-vue
> node build/dev-server.js

Listening at http://localhost:8080

webpack built 1e6ddc6a74121a19e6fa in 2827ms
Hash: 1e6ddc6a74121a19e6fa
Version: webpack 1.13.1
Time: 2827ms
     Asset       Size  Chunks             Chunk Names
    app.js    1.06 MB       0  [emitted]  app
index.html  241 bytes          [emitted]  
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  21.4 kB       0       
webpack: bundle is now VALID.

Vue Index

发布： 

$ npm run build 

就会把文件打包到 dist 目录下。

sg552@siwei-i7-book:/workspace/test-vue$ npm run build

> test-vue@1.0.0 build /workspace/test-vue
> node build/build.js

  Tip:
  Built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

Hash: a29da41b1f02680e9b0c
Version: webpack 1.13.1
Time: 4268ms
                                                  Asset       Size  Chunks             Chunk Names
             static/js/manifest.6d4f7691d281e9668e31.js  838 bytes       0  [emitted]  manifest
                  static/js/app.c74152b60387f00140e7.js    11.2 kB    1, 0  [emitted]  app
               static/js/vendor.27fc975b9a336a8f5d73.js    79.4 kB    2, 0  [emitted]  vendor
    static/css/app.649c105cdf4209683036841d77ad6f25.css  505 bytes    1, 0  [emitted]  app
         static/js/manifest.6d4f7691d281e9668e31.js.map    8.88 kB       0  [emitted]  manifest
              static/js/app.c74152b60387f00140e7.js.map    30.2 kB    1, 0  [emitted]  app
static/css/app.649c105cdf4209683036841d77ad6f25.css.map    1.28 kB    1, 0  [emitted]  app
           static/js/vendor.27fc975b9a336a8f5d73.js.map     682 kB    2, 0  [emitted]  vendor
                                             index.html  438 bytes          [emitted]

订阅/RSS Feed

Subscribe