vue-cli

• 1.介绍并安装 vue-cli
• • 1.1 什么是单页面应用程序
  • 1.2 什么是 vue-cli
  • 1.3 安装
• 2. 使用 vue-cli 创建项目
• • 2.1 基于 vue-cli 快速生成工程化的 Vue 项目：
  • 2.2 创建过程：
• 3. 介绍项目目录结构
• • 3.1 基本目录
  • 3.2 src 目录
• 4. 了解 vue 项目的运行流程

1.介绍并安装 vue-cli

1.1 什么是单页面应用程序

1.2 什么是 vue-cli

• vue-cli 是 Vue.js 开发的标准工具。简化了程序员基于 webpack 创建工程化 vue 项目的过程。
• 程序员可以专注在撰写应用上，而不必化好几天去纠结 webpack 配置问题。
• 中文官网：Home | Vue CLI (vuejs.org)

1.3 安装

安装： 全局安装在电脑上

npm install -g @vue/cli

2. 使用 vue-cli 创建项目

2.1 基于 vue-cli 快速生成工程化的 Vue 项目：

vue create 项目名称

2.2 创建过程：

• Please pick a preset: (Use arrow keys) 请选择一些预设，vue2 或者 vue3 的项目

• Manually select features 手动选择要安装哪些到项目中

• 

• Check the features needed for your project 选择需要安装哪些功能

• Press <space> to select 按下空格键去选择

• 

• Choose a version of Vue.js that you want to start the project with选择版本

• Pick a CSS pre-processor 选择 CSS 预处理器

• 

• Where do you prefer placing config for Babel, ESLint, etc.?

• 像 Babel, ESLint 这些第三方插件配置文件如何创建

• In dedicated config files 放在独立的文件中

• In package.json 放在 package.json 中

• 选择第一项，放在自己独立的配置文件中

• 

• Save this as a preset for future projects? 是否将该过程设置为预设

• 选择 y 之后 需要给预设起名字 Save preset as:

• 

• 项目创建成功如下图所示：

• 

• 运行提示的命令，得到项目地址，查看项目

• 

• 

3. 介绍项目目录结构

3.1 基本目录

• 

• built files will be auto injected index.html 中的 意思为built 的文件都将被自动引入到这个区域

• 

3.2 src 目录

• assets 放置静态资源，如 CSS 文件，图片等等
• components 封装可复用的组件
• App.vue 项目的根组件
• main.js 项目的入口文件，打包的入口

4. 了解 vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

• App.vue 用来编写待渲染的模板结构

• index.html中预留一个 el 区域

• main.js 把 App.vue 渲染到了 index.html 所预留的区域中

• 使用 el 属性或 $mount 方法来设置预留区域没有差别

• new Vue({
    // el: '#app',
    // 把 render 函数指定的组件 渲染到 HTML 页面中
    render: h => h(Test),
  }).$mount('#app')