Vue learning(进阶)第一篇

Vue 2020-01-20 52 次浏览 次点赞

vue命令工具的安装

官网

https://github.com/vuejs/vue-cli
#最新版本确认
$ npm show vue-cli
#安装
$ npm install -g [email protected]
#安装版本确认
$ npm -V
#命令帮助
$ vue -h

vue-cli命令选项

  • init 初始化Project
  • list 当前可用的模板
  • build 组件打包发布
  • help [cmd]
$ vue help init
Usage: vue-init <template-name> [project-name]

Options:
  -c, --clone  use git clone
  --offline    use cached template
  -h, --help   output usage information
  Examples:

    # create a new project with an official template(默认)
    $ vue init webpack my-project

    # create a new project straight from a github template(自定义)
    # GitHub用户名+子项目名+你的工程名
    $ vue init username/repo my-project

各种项目模板

vue命令默认提供的各种模板(6个)

$ 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.

模板官网

https://github.com/vuejs-templates

webpack模板工程

  • 建立webpack模板工程

官网

http://vuejs-templates.github.io/webpack/
$ vue init webpack myweb
$ cd myweb
$ npm run dev
$ npm run build

webpack工程

  • src:源文件文件夹
  • dist:打包文件夹
  • package.json:项目设置文件
可能出现问题的解决方法

Vue进阶系列说明:本系列仅仅作为Vue进阶视频的归纳总结与记录,在此感谢小马视频ORYouTube地址


本文由 fmujie 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论

召唤看板娘