vue-cli 使用入門

Dec 16, 2016

Reference

操作步驟

執行

$ vue list

顯示


  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  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 init」的樣式是「vue init [template] [project]」，

所以「[template]」這個欄位，可以填入上面「browserify」，「browserify-simple」，「simple」，「webpack」，「webpack-simple」其中一個，

下面以「webpack」為例，

然後要產生新的專案資料夾名稱是「my-project」，所以「[project]」這個欄位要填入「my-project」。

執行

$ vue init webpack my-project

一直按下「Enter」使用「預設值」

顯示


  This will install Vue 2.x version of template.

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

? Project name my-project
? Project description A Vue.js project
? Author
? Vue build standalone
? 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 "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

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

就會產生「my-project」這個資料夾。

執行下面指令，觀看「my-project」這個資料夾

$ tree my-project

顯示 (可以對照「GitHub / vuejs-templates / webpack / template」這個資料夾)

my-project/
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── Hello.vue
│   └── main.js
├── static
└── test
    ├── e2e
    │   ├── custom-assertions
    │   │   └── elementCount.js
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    │       └── test.js
    └── unit
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── Hello.spec.js

12 directories, 26 files

更多的使用方法，請參考「指令 - vue-init」這篇的說明。

Reference

操作步驟

Next