Vue脚手架的安装教程以及成功之后对目录结构的相关解析

vue脚手架
安装node下载软件 一路默认安装（配置环境变量）
修改下载源 npm config set registry http://registry.npm.taobao.org/
安装vue npm install -g @vue/cli

创建工程 vue create vue-demo

一、please pick preset 选择预设
default 默认
Manualy 手动
二、 Check the features needed for your project: 为工程选择特性
选 babel、 router、vuex、 css-process
Bable 将 ES6 转 ES5 为了 浏览器能识别
TypeScript 更高级的js， js的超级， 添加了面向对象的实现
PWA 原生的移动端支持
Router 路由网址
VUEX 组件传参
CSS Pre-processors CSS 的预处理器
Linter / Formatter 语法检查器
Unit Testing 端端测试

三、 Use history mode for router？ 使用history 模式路由
选择 N

History 特点： 在路由中没有#号
Hash 模式： 路由中有#号， 只刷新后面内容

四、Pick a CSS pre-processor 选择css预处理器
Less 是 CSS的预处理工具

五、 Where do you prefer placing config for Babel, ESLint, etc 模块配置放在那儿
In package.json

六、 Save this as a preset for future projects? 是不是要保存预设

N 新手建议不保存

安装成功之后会有两行蓝色提示

首先输入cd py1911-demo
其次输入 npm run serve
成功之后就可以在浏览器输入 http://localhost:8080/#/

---

以上是vue脚手架的安装

---

以下是vue脚手架的目录结构

Node_modules 安装了 1109 个js模块 以后安装的模块也会放到这里，不需要关注
Public 此处存放静态资源
Favicon.ico
Index.html 页面入口
Src 编写代码的地方

	Assets 资源  可以存放图片等静态资源
	Components 组件  在其中编写组件
				 三部分 template 内部编写Html
						Script  内部编写Js代码
						Style 内部编写Css样式**
	Router 路由网址
	Store 数据状态管理器，用于组件传参
	views 视图  页面

App.vue 主组件入口
Main.js 主逻辑入口

.gitignore git 工具忽略列表
babel.config Babel 的配置文件（ES6 转 ES5 参考）
package.json 项目工具的配置信息
package-lock 1109个包相互依赖关系
README.md 帮助文档