06. vue-cli

一、单文件组件

# 原来写的组件存在的问题
    全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
    字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
    不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
    没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
    
# 以后每个组件就是一个 xx.vue-----最终----->html,css,js
	并且还可以使用 webpack 构建工具
    
# CLI 会为你搞定大多数工具的配置问题

二、vue-cli

vue-cli：官方提供的一个脚手架，用于快速生成一个 vue 的项目模板。

依赖的环境：

1、安装node
2、淘宝镜像（cnpm） npm install -g cnpm --registry=https://registry.npm.taobao.org
3、装完以后，本地就有cnpm命令，以后再装模块，就可使用cnpm安装
4、cnpm install -g @vue/cli    # -g 指的是全局安装
5、装完以后就可以使用vue命令
6、通过vue命令创建项目
	 - vue create [项目名]   # cmd命令行下创建项目
     - vue ui  # 浏览器图像化界面创建项目
        
   # 注意：新建的这些项目的本质就是：cli从git上拉一个空项目（模板），在模板基础上继续写就可以
7、注意：
	vue： 2.x
    bable: 兼容性相关（es6语法，自动转成es5兼容浏览器）
    eslint: 语法检查，代码格式化
8、运行项目
	npm run serve : 在浏览器中访问
9、使用ide打开编写
	如：pycharm

三、项目目录介绍

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉，不上传git，使用npm install重新安装)
public: 共用资源
	--favicon.ico
	--index.html: 项目入口页面，单页面开发
src: 项目目标,书写代码的地方
	-- assets:资源，静态图片
	-- components:组件（swiper组件...）
	-- views:视图组件(也是组件)
	-- App.vue:根组件
	-- main.js: 入口js
	-- router.js: 路由文件
	-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json：项目配置依赖（等同于python项目的reqirement.txt）

"scripts": {
  "serve": "vue-cli-service serve",   # npm run serve  运行项目
  "build": "vue-cli-service build",   # npm run build   构建项目---》html，css，js
  "lint": "vue-cli-service lint"      #npm run lint    格式化代码
}