Vue2.0入门:搭建脚手架CLI

469 阅读1分钟

一、VUE脚手架介绍

官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

使用脚手架的好处:

  1. 脚手架是通过webpack搭建的开发环境

  2. 使用ES6语法,在低版本的浏览器中会转换为ES5去兼容

  3. 打包和压缩js为一个文件

  4. 项目文件在环境中编译而不是在浏览器中,这样的话访问速度更快

  5. 实现页面自动刷新,即修改实时生效

二 、安装

  1. 脚手架依赖于nodejs,所以我们要先安装nodejs,安装教程请自行百度,安装完成以后查看node版本和npm版本,保证node版本在6.9以上,npm版本在3.10以上

  2. 安装VUE全局的CLI(命令行工具)

    安装命令:npm install --global vue-cli

    安装以后查看安装的版本:

    vue --version

  3. 新建一个vue的项目并运行它

    新建项目命令:vue init webpack vue-playlist

    进入项目安装项目所需的依赖
    cd vue-playlist
    npm install

运行项目:

    npm run dev   

引用原文 www.cnblogs.com/leeSmall/p/…

三、SRC文件流程及根组件

app.vue 根组件
index.html当前项目的入口文件

main.js与index有直接连接的关系