vue-cli

vue-cli 脚手架

1.全局安装

$ npm install -g vue-cli

2.查看可用的模板

$ 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.
  ★  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.                                ---------- webpack简单版   

3.模板方案

$ vue init webpack <my-project>                      ----------<my-project> 为模板定义的名称

? Project nam (<my-project>)                       ----------项目名称
? Project description (A Vue.js project)           ----------项目描述
? Author                                           ----------作者
? Vue build (Use arrow keys)                       ----------这里是应该是打包发布的方式吧！！！
> 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
? Install vue-router? (Y/n)                        ----------是否需要路由
? Use ESLint to lint your code? (Y/n)              ----------是否使用ESLint，这里根据需求选择
? Set up unit tests (Y/n) //是否设置单元测试
? Setup e2e tests with Nightwatch? (Y/n)           ----------是否需要e2e单元测试，这里根据需求选择；
? Should we run `npm install` for you after the project has been created? (reco
mmended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

4.进入vue-cli

$ cd <my-project>

5.运行项目

$ npm run dev

6.项目目录

项目目录.png

图片来源于github用户:NPLUSWEB