文章目录

• • • vue-cli
    • • 基本知识
      • vue-cli的安装
      • vue-cli的使用
      • vue项目中src目录的构成：
      • vue项目的运行流程

vue-cli

基本知识

1、单页面应用程序(SPA)：指的是一个web网站中只有唯一的一个html页面，所有的功能与交互都在这唯一的一个页面内完成
2、vue-cli是Vue.js开发的标准工具。简化了程序员基于webpack创建工程化的Vue项目的过程。

vue-cli的安装

vue-cli是npm上的一个全局包，使用npm install命令，即可进行下载，命令如下：
npm install -g @vue/cli

小贴士
如果跟我一样遇到npm安装vue-cli时速度慢，fetchMetadata经常卡住，可以点击参考这篇博文，亲测有效！

安装完成后，输入vue -V检查一下是否安装成功

小贴士
如果出现报错 ‘vue’ 不是内部或外部命令，也不是可运行的程序或批处理文件，可以参考一下博文进行解决
‘vue’ 不是内部或外部命令，也不是可运行的程序 或批处理文件

vue-cli的使用

1、基于vue-cli快速生成工程化的Vue项目：
在终端中输入vue create+项目名称（不能包含中文或者空格）回答一些问题即可完成创建，下面是几个问题的建议选项：
根据提示完成创建后，后台要保持开启终端窗口打开不能关闭。

vue项目中src目录的构成：

1. assets文件夹：存放项目中用到的静态资源文件，例如：css样式、图片资源
2. components文件夹：程序员封装的、可复用的组件都要放到该文件夹下
3. main.js 是项目的入口文件，整个项目的运行，要先执行 main.js
4. App.vue 是项目的根组件，定义UI结构

vue项目的运行流程

在工程化的项目中，vue通过main.js把 App.vue 渲染到 index.html 的指定区域中

• App.vue用来编写待渲染的模板结构
• index.html需要预留一个el区域
• main.js把App.vue渲染到index.html所预留的区域中

main.js

//导入vue这个包，得到vue的构造函数
import Vue from 'vue'
//导入App.vue根组件
import App from './App.vue'

Vue.config.productionTip = false

//创建vue的实例对象
new Vue({
  el:"#app",
  //把render函数指定的组件渲染到html页面中
  render: h => h(App),
}).$mount('#app')

解释一下就是，用 render 函数中选中的组件（代码中选中的是App.vue根组件）来代替 el 属性所指的位置（id为app的标签）