Vue学习笔记5 Vue-cli快速上手_vuecli补包-优快云博客

文章目录

前言
一、Vue-cli是什么？
二、使用步骤
- 1.安装Vue-cli
- 2.初始化Vue-cli
三、Vue-cli项目目录结构解析
- 1.浅析项目目录
- 2.详细项目目录解析如下
四、Vue-cli补充
- 1.打包vue-cli项目
- 2. main.js
总结

前言

本文将介绍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: '<App/>'
})