Vue学习笔记5 Vue-cli快速上手

---

前言

本文将介绍vue-cli的安装及目录结构以及一些基础配置

Vue-cli(Vue脚手架)准备：

• 本教程使用代码编写工具是VSCode
• 具备一定的vue语法基础
• 对npm/cnpm(包管理工具)有所了解
• 了解webpack

---

一、Vue-cli是什么？

Vue-cli是Vue.js全家桶中一个很重要的成员之一，Vue-cli又俗称脚手架，用于创建Vue项目自动生成标准的项目目录以及生成项目的默认配置，我个人感觉有点像vue的hello world模板。

详细的介绍请参照官方文档，我只说我在学习过程中的个人理解

二、使用步骤

1.安装Vue-cli

新建一个空文件夹后选择该目录右击“在终端打开” 输入如下代码：

npm install vue-cli -g

验证是否安装成功 输入如下命令查看vue-cli的版本

vue -V

tip: 注意-V是大写的，小写是识别不了的。如果上面的命令返回一个本版号则证明安装成功

2.初始化Vue-cli

代码如下（示例）：

vue init webpack vuecliTest

tip: 基于webpack初始化项目，vuecliTest是项目名称 可以省略不写

输入上面的命令后会出现一些项目的基础信息的初始化配置，具体如下图：


tip：至此vue-cli安装完成

---

三、Vue-cli项目目录结构解析

1.浅析项目目录

• build
  该目录下是项目构建，也就是关于webpack有关的都在这里面了。
• config
  项目开发环境配置文件夹，即项目配置都在这里，例如环境变量等。
• node_modules
  npm下载的包都放在这里面
• src
  源码目录，即我们开发的东西都放在src下面
• static
  静态目录，即用来存放一些静态文件，例如图片

2.详细项目目录解析如下

提示：图片来源于网络

---

四、Vue-cli补充

1.打包vue-cli项目

npm run build

打包完成后会生成dist目录，我们只需要把该目录下的所有文件上传至服务器并在服务器配置好环境即可。

2. main.js

main.js 是项目的入口文件，里面的代码如下，看看就好了，没啥难度

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
     
  el: '#app',
  router,
  components: {
      App },
  template: ''
})

tip：整个项目的逻辑就不讲了，文字很难表述清楚。有不懂的欢迎留言，共同进步。至此正文就结束了

总结

Vue-cli需要的前导知识还是挺多的，如果是零基础的同学我建议你们先去看你看我之前写的关于Vue的文章。链接如下：
vue.js 入门学习笔记一
Vue入门学习笔记2 Vue内部指令整理
Vue入门学习笔记3 vue全局API整理
Vue入门学习笔记4 vue原生构造器的选项详解