Vue—vue-cli脚手架3.0版本搭建、创建项目、项目目录

目录

一、概述

二、脚手架搭建

三、创建项目

四、项目目录

---

一、概述

vue-cli3.0版本要求NodeJS版本必须是8.9或更高版本。

二、脚手架搭建

命令行中输入如下指令安装vue-cli3.0版本。

> npm install -g @vue/cli

注意，如果之前安装了2.0版本，需要先卸载，命令如下所示。

> npm uninstall -g vue-cli

三、创建项目

3.0版本创建项目与2.0版本相比，不需要单独安装webpack。直接使用如下命令创建项目即可。

>  vue create vueapp

四、项目目录

dist

输出目录。打包生成的文件，可以直接发布。

node_modules

安装的依赖包。

public

静态资源，会被复制到dist目录中。

(1) favicon.ico  网站图标
(2) index.html   页面入口文件, 项目打包时会以该文件为母板

src

项目源代码。

(1) api         api请求接口目录
(2) assets      放置一些静态资源，例如图片、图标、字体
(3) components  公共组件
(4) router      vue-router相关配置
(5) store       vuex相关配置
(6) views       自定义的页面组件
(7) App.vue     页面入口文件
(8) main.js     vue程序入口文件, 加载各种公共组件
(9) utils.js    封装的工具函数，如时间格式化等。

package.json

项目描述及依赖记录。

package-lock.json

版本管理使用的文件。

vue.config.js

项目的主要配置文件，如果没有，请在根目录下手动创建。3.0版本脚手架创建的项目可以直接在根目录下创建一个vue.config.js文件，该文件是一个可选的配置文件，如果项目的根目录中存在这个文件，则该文件会被@vue/cli-service自动加载，之前繁琐的配置都可以在这个文件中直接配置。