Vue-cli 3.0

一、vue-cli 3.0（vue脚手架3.0）

1、Vue-cli 是一个基于 Vue.js 进行快速开发的完整系统

• 文档地址：https://cli.vuejs.org/zh/guide/installation.html

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）

Hello Vue

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