Vue项目基础环境搭建完整步骤

使用vue官方脚手架(vue-cli)

vue-cli简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是一个官方脚手架，可以帮助我们快速创建vue项目工程目录，目前最新版本4.x。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。

vue-cli安装&使用步骤

1、全局安装vue-cli

>> yarn global add @vue/cli    // vue新脚手架是4.X

2、创建项目

>> vue create 项目名     

3、进入项目目录，启动项目

>> yarn serve

项目目录详解

一级目录:

 node_modules        依赖的第三方模块

 public                      vue服务器静态文件目录，只有唯一的一个index.html

 src                          我们的开发目录，最重要的目录，源文件（我们写的代码）目录

 .gitignore                 git忽略列表

 babel.config.js         es6编译配置

 package-lock.json   包描述文件（记录更详细，记住当时的版本信息）

 package.json           包描述文件

 README.md           说明文档

二级目录:

src：

    assets               存放静态资源，比如:css、images、fonts

    components      主要是公用的小组件

    views                 页面级别的组件

    App.vue             整个应用的顶级组件

    main.js               入口文件

推荐安装两大vue相关插件:

vetur插件，支持vue代码高亮显示。

Vue VSCode Snippets插件，写vue效率大幅提高。