6-4 vue-router、vue-cli和单文件组件-vue-cli脚手架

目录：

• 简介
• vue-cli 安装 ：webpack-simple
• 使用webpack模板

一、简介

　vue-cli是一个vue脚手架，可以快速构造项目结构，vue-cli本身集成多种项目模板。

　vue-cli的github地址：https://github.com/vuejs/vue-cli   

　vue-cli的官方文档：https://cli.vuejs.org/zh/。当然这个在vue.js官方网站有入口： 生态系统 -> 工具 -> Vue  CLI

　vue-cli 本身集成了多种项目模板:

• simple：内容很少，也比较简单，基本不用。
• webpack：包含ESLint代码规范的检查和 unit 单元测试等。
• webpack-simple：没有代码规范检查和单元测试 => 前期开发可以使用它，更简洁一点。
• browserify：使用的也比较多，但是我们今后的开发不用这个，一般都用webpack。
• browserify-simple
• pwa：忘记它，没人用。

二、vue-cli 安装：webpack-simple

2.1、vue-cli安装、配置vue命令环境

# 安装 vue-cli手脚架， -g(global) 表示全局安装
D:\PycharmProjects\vue>npm install -g vue-cli

# 安装完毕之后，会提供一个工具叫 vue
D:\PycharmProjects\vue> vue
Usage: vue <command> [options]
.....

#查看vue的版本
D:\PycharmProjects\vue>vue --version
2.9.6

#查看 vue-cli 提供的项目模板
D:\PycharmProjects\vue>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.

2.2、初始化项目，生成项目模板

1.官方使用说明：

Useage:

$  vue  init  <template> <project-nam>

Example：

$ vue init webpack  my-project

2.初始化  webpack-simple，生成项目模板

说明: vue  init   模板名   模板名

D:\PycharmProjects\vue>vue init webpack-simple vue-cli-demo

? Project name vue-cli-demo  (新项目名输入，默认直接enter)
? Project description A Vue.js project (项目描述，无直接enter)
? Author  (作者，无直接enter)
? License MIT(认证单位)
? Use sass? No (是否用saas模板，一门预处理css语言，输入N)

   vue-cli · Generated "vue-cli-demo".

   To get started:(如何使用，操作关键)

     cd vue-cli-demo
     npm install
     npm run dev

项目的目录结构：

2.3、 进入生成项目目录，安装模块包，运行

#进入vue-cli-demo 项目目录
D:\PycharmProjects\vue>cd vue-cli-demo

#安装模块包
D:\PycharmProjects\vue\vue-cli-demo>npm install
.....

#运行
D:\PycharmProjects\vue\vue-cli-demo>npm run dev
.....

# 上线需运行发布命令，将项目打包输出dist(dist发布的意思)目录，项目上线的话需要将 dist 目录copy到服务器上
D:\PycharmProjects\vue\vue-cli-demo>npm run build
....

三、使用webpack 模板

3.1、创建项目

#新建项目需要返回上一层 cd ..
D:\PycharmProjects\vue\vue-cli-demo>cd ..

#新建 webpack模板
D:\PycharmProjects\vue>vue init webpack vue-cli-demo2
? Project name vue-cli-demo2
? Project description A Vue.js project （项目描述）
? Author
? Vue build standalone （上下级选择，1、Runtime+Compiler(推荐) 2.Runtime-only）
? Install vue-router? No (是否安装vue-router)
? Use ESLint to lint your code? Yes (ESLint 是用来统一规范和风格的工具，如：缩进、空格、符号等，要求比较严格，[官网](https://eslint.org))
? Set up unit tests No (是否选择 单元测试)
? Setup e2e tests with Nightwatch? No（是否启用e2e的测试，选择 n）
? Should we run `npm install` for you after the project has been created? (recommended) npm (选择npm方式运行)

3.2、安装模块包，运行

#进入项目
D:\PycharmProjects\vue>cd vue-cli-demo2

#安装模块
D:\PycharmProjects\vue\vue-cli-demo2>npm install
....

#启动
D:\PycharmProjects\vue\vue-cli-demo2>npm run dev
.....

3.3、webpack 模板项目，目录结构：

这边我找了一个很详细的，webpack目录结构的详解，大家可以参考一下：https://www.cnblogs.com/shaoniandream/p/10490254.html