vue深度入门
目录
1.开始
1. 先检查下 Node.js 是否安装成功
2. 由于众所周知的原因，可以考虑切换源为 taobao 源
3. 全局安装 vue-cli
4. 创建一个vue项目（下面两者选1）
5. 安装依赖，走你
2.目录结构
1）build
2）config
3）node_modules
4）src
5）static
6）.babelrc
7）.editorconfig
8）.eslintignore
9）.eslintrc.js
10）.gitignore
11）.postcssrc.js
12）index.html
13）package.json
14）package_lock.json
15）README.md
3.脚手架工具vue-cli
1）简介
2）作用
3）安装使用
4）目前可用的模板有
1.开始
现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 nodejs 并安装。
1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0
$ npm -v
5.6.0
2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli
4. 创建一个vue项目（下面两者选1）
# 新手一路回车选择默认就可以了
$ vue init webpack my-project（创建vue项目）
$ vue init mpvue/mpvue-quickstart my-project（创建一个基于 mpvue-quickstart 模板的新项目）
5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev（新增的页面需要重新执行该命令来进行编译）
2.目录结构
深度分析：https://blog.csdn.net/qq_34645412/article/details/78818245
1）build
这个是我们最终发布的时候会把代码发布在这里
1.1 build.js 生产环境构建脚本，也就是打包的时候需要的一些包的引入配置信息
1.2 check-versions.js 用来检测node和npm版本的
1.3 logo.png 就是项目的logo
1.4 utils.js 此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader
1.5 vue-loader.conf.js 处理.vue文件的配置文件
1.6 webpack.base.conf.js wabpack基础配置
1.7 webpack.dev.conf.js 这里面在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：
将webpack的热重载客户端代码添加到每个entry对应的应用
合并基础的webpack配置
配置样式文件的处理规则，styleLoaders
配置Source Maps
配置webpack插件
1.8 webpack.prod.conf.js webpack生产环境的核心配置文件
2）config
2.1 dev.env.js 开发环境配置信息
2.2 index.js 项目基础配置信息
2.3 prod.env.js 线上环境配置信息
3）node_modules
用来存放项目依赖的各种包
4）src
用来存放项目代码
4.1 src/main.js 项目入口文件
4.2 src/App.vue 项目原始组件
4.3 src/router/index.js 项目路由
4.4 src/components 项目小组件
4.5 src/assres 项目图片类资源
5）static
静态资源目录 如图片、字体等
6）.babelrc
babelrc文件是babel的配置文件
主要适用于编译es6转义为es5
一般用2个插件es2015,stage-2,transfer-runtime
"comments": false,表示不生成注释，反之就是生成注释
7）.editorconfig
编辑代码风格
8）.eslintignore
忽略ESLint语法检查的文件目录配置
9）.eslintrc.js
eslint的配置文件
10）.gitignore
表示这里面的内容再提交到git仓库的时候忽略
11）.postcssrc.js
应该是你用到的css的前or后处理器的配置吧
12）index.html
首页
13）package.json
整个项目的一个启动入口和依赖包安装指南（npm install会安装的包基本都在这里配了）
14）package_lock.json
对于npm修改node_modules树或package.json的任何操作，将自动生成package-lock.json。 它描述了生成的确切树，以便后续安装能够生成相同的树，而不管中间依赖性更新如何。
该文件旨在被提交到源存储库，并提供各种用途：描述依赖关系树的单一表示形式，以确保队友，部署和持续集成确保安装完全相同的依赖关系。
就比如说你安装了 node1.0版本，你队友安装的时候自动会安装1.0版本的，不会再装一个2.0版本的最后提交代码产生冲突
参照：https://docs.npmjs.com/files/package-lock.json
15）README.md
项目介绍
3.脚手架工具vue-cli
1）简介
类似于工人手里面的脚手架一样，帮助工人搭架子用，同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具
2）作用
目录结构、本地调试、代码部署、热加载、单元测试
3）安装使用
$ npm install -g vue-cli 安装
$ vue init
template-name是引用的模板名称，project-name自己的项目名称
eg:
vue init webpack my-project
webpack引用的模板名称， my-project项目名称
所有官方项目模板都是在vuejs-templates组织中的仓库。 将新模板添加到组织后，就可以运行vue init
4）目前可用的模板有
webpack - 一个功能齐全的Webpack + vue-loader安装程序，带有热重载，linting，测试和css抽取。
webpack-simple - 简单的Webpack + vue-loader设置，用于快速原型设计。
browserify - 一个全功能的Browserify + vueify设置与热重载，linting和单元测试。
browserify-simple - 用于快速原型设计的简单的Browserify + vueify设置。
pwa - 基于webpack模板的vue-cli的PWA模板
mpvue/mpvue-quickstart 小程序vue的模板