Vue-Cli的使用

常规操作

1.vue init 项目模板名 项目名

vue init webpack-simple myproject

根据提示填写项目相关信息。
2.cd进项目所在文件夹，执行

npm install

安装项目模板的依赖包。
注意：默认安装的是最新版本的包。

3.在项目文件夹下，执行

npm run dev

用npm包管理器，在开发模式（项目有开发模式、上线模式）下，用自带的一个服务器去执行项目。

默认打开的端口是8080，若打开多个项目，端口号会依次自动增加。

项目目录解释

node_modules：组织npm安装的各种包

src：此文件夹中是我们要写代码的地方。其中：
（1）.vue文件是组件文件，组件由标签<template>、js<script>、样式<style>三部分组成。SPA项目是由各种不同的.vue文件组成的。初始的项目中有一个App.vue组件，它是整个项目的根组件；
（2）index.html是页面的入口文件；
（3）main.js是程序的入口文件，作用是导包。比如一个初始状态下的main.js中导入vue框架，并导入App.vue组件；
（4）assets文件夹用于存放项目需要用到的各种静态资源。

.babelrc：ES6的语法并非所有浏览器都支持，要使所有浏览器可以支持我们所开发的项目，必须将ES6的语法转换成较低版本的ES语法。babel工具提供ES6语法向低版本ES语法转换的功能，而.babelrc是babel工具的配置文件，通过对其配置，可以实现相应的转换功能。

.editorconfig：对当前使用的编辑器进行一些默认的配置，不需要我们关心。

.gitignore：用git管理代码时，如果某些文件不需要用git管理，可以将不想被git管理的目录或文件名放在此文件中。容易发现，占用空间巨大的node_modules文件夹默认被放在.gitjgnore中。

package-lock.json：锁住安装包时的版本和链接。因为开发结束后某些包可能发生了更新，而打包上传是不上传node_modules的，所以用户在使用项目时，可能会安装更新版本的包，导致项目的某些功能无法正常使用。为了解决不一致的问题，package-lock.json记录正常使用项目需要的那些包，在用户使用项目时，为其安装对应的包。

package.json：npm init初始化的一个配置文件，其中的scripts选项用于自定义指令，比如npm run dev中的dev是一个很长的指令，就定义在这里，可以起到简化指令的作用。

README.md：项目的文档，对项目进行说明。

webpack.config.js：用于处理项目资源。可以打开看一下其中的内容，比如能看到：它可以将浏览器不能识别的.vue文件通过vue-loader加载为浏览器可以识别的文件。