VUE – cli 脚手架工具 及 创建项目
     发布在:JavaScript      浏览:50      评论:0 条评论

需要安装npm,若未安装,请看《NPM 安装 及 简单配置》

  1. 安装vue-cli脚手架
$ npm install -g vue-cli
# 全局安装vue脚手架
# 若npm报错,可使用cnpm
$ cnpm install -g vue-cli

# 安装完成,查看版本号
$ vue --version
  1. vue脚手架创建webpack项目
$ vue init webpack demo
? Project name (demo)                      # 项目名称 默认直接回车
? Project description (A Vue.js project)   # 项目简介 默认直接回车
? Author (Author_Name <111111111@qq.com>)  # 作者信息 默认直接回车
? Install vue-router? (Y/n) Y              # 安装vue-router路由组件
? Use ESLint to lint your code? (Y/n) n    # 安装eslint代码规范检查组件
                                           # 我是关闭的 自己配eslint vue官方的代码规范写不惯
                                           # 如何用sublime配置eslint 我之后会专门写一篇 IDE应该都有自带eslint
# 后面的配置可直接回车 默认
? Set up unit tests (Y/n) Y
? Setup e2e tests with Nightwatch? (Y/n) Y
? Should we run `npm install` for you after the project has been created? (recommended) npm

    vue-cli · Generated "demo".

To get started: # 教你怎么开启项目
  cd demo
  npm install
  npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack

  1. 注意

有时候照着流程启动项目以后,会各种报错无法启动。这个时候,一般是在创建项目的时候,网络问题导致依赖包没安装完全。只要把项目里的node_modules文件夹删掉,必须删掉,因为就算依赖包缺少了部分文件,但它任然是已经下载好了,不删掉的话,npm会自动检测跳过安装。然后用cnpm install重新安装一下就行了

至此,vue脚手架就算安装好了,项目也正常搭建。

    Responses