现代化的 vue项目

目前为止，我们的vue的讲解都是通过cdn的方式去弄的。而现代化的 vue 项目，用的是构造工具打包工具 npm相关的方法。

构建打包工具使用的是webpack

可以理解为gulp类似的东西

使用vue官方的脚手架工具（@vue/cli）快速搭建现代化的 vue 项目

什么叫脚手架呢？快速搭建项目的工具。如何使用 全局安装工具 $ npm install @vue/cli -g 全局安装完成之后，提供了一个vue的命令。使用vue -v 来查看一下脚手架的版本 $ vue -v

@vue/cli 4.3.1注意：不要把脚手架的版本与vue核心的版本搞混了。

使用vue命令创建一个项目 先在要创建项目的文件夹下打开 cmd运行如下命令 $ vue create 项目名字

注意，不要使用 git bash 来操作，git bash 不能上下键

node_modules 项目依赖包public 静态资源文件，里面默认有一个 index.html 和 一个 favicon.ico。这里存放的是不需要被构建工具处理的。比如一个css。我们直接通过 link 的方式去引入 favicon.ico 当前项目的浏览器的小图标index.html 整个项目的入口页面，这个文件中只提供了一个挂载点元素，js内容都是构建工具去处理的 src 项目的源代码文件夹 （放在这个文件夹中的内容我们认为都是需要被构建工具处理的文件）assets 静态资源文件。需要被构建工具处理的components 存放公用的vue组件的文件夹HelloWorld.vue 一个单文件组件App.vue 项目的万年老二组件main.js 整个项目的入口js文件 。构建工具打包生成js文件的起点就是它。.gitignore git 的忽略文件的设置文件。脚手架创建的项目，默认做了git初始化babel.config.js babel相关的配置文件。（转换es6、es7、es8等高级语法到es5的一个工具）package-lock.json 依赖锁文件package.json 项目描述文件，里面有依赖项的配置READMD.md 读我。接手一个项目，第一件事情，就是看 README.md