一、vue-cli 3.0（vue脚手架3.0）
1、Vue-cli 是一个基于 Vue.js 进行快速开发的完整系统
2、使用vue-cli脚手架创建项目
- （1）全局安装脚手架
npm install -g @vue/cli
- 输入：vue -V，检查是否安装成功
-
（2）创建Vue项目的两种方式
- （2.1）使用命令创建项目
vue create hello-world（项目名称）
-
（2.2）使用图形界面创建项目
- 开启图形界面：vue ui
- （2.3）启动项目
npm run serve（serve根据自己在package.json中的命名，一般默认serve）
image
3、项目目录基本结构
- （1）package.json：主要用来定义项目中需要依赖的包
- （2）babel.config.js：编译es6用的,把es6转变成js5
- （3）gitignore： git忽略的文件或文件夹
- （4）src：源代码存放的地方
- （5）public：放置公共的文件
4、其他设置
- （1）在图形界面中启动项目和打包项目
-
（2）运行打包后的文件需要启动一个服务，不然直接打开会报错
- npm i http-server -g
- 在打包后的目录(本项目是dist), 打开命令提示符
- 输入http-server -o
- （3）在图形界面中安装项目需要的依赖
-
（4）查看webpack在项目中的配置（webpack默认被隐藏）
- （4.1）在控制台查看：vue inspect
- （4.2）把配置输出到out.js文件查看：vue inspect>out.js
-
（5）可以对项目中的webpack新增配置
- 新增配置文件：vue.config.js
- 要跟package.json在同一目录下，与配置webpack.config.js同理
二、快速原型开发（用vue脚手架打开组件）
1、vue serve
- （1）在开发环境模式下零配置，为 .js 或 .vue 文件启动一个服务器
- （2）文档地址：https://cli.vuejs.org/zh/guide/prototyping.html
2、安装工具
npm install -g @vue/cli-service-global
3、使用
- （1）制作小组件App.vue
<template>
<h1>Hello!</h1>
</template>
- （2）然后在这个 App.vue 文件所在的目录下运行
vue serve App.vue
4、启动项目的多种方式
- vue serve 使用了和 vue create 创建的项目相同的默认设置(webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件，这个入口可以是一个 .js 或一个 .vue 文件。如果没有指定入口，则会使用 src/App.vue
- （1）npm run serve（完整的项目）
- （2）vue serve src/main.js
- （3）vue serve App.vue
