vue-cli 简单了解及使用

vue-cli是vue官方提供的工具，是辅助项目开发的工具

vue-cli 是一个基于Vue.js进行快速开发的完整系统，也称脚手架工具，帮助我们完成项目构建的工具。使用vue-cli 的好处有：

       ● 统一项目架构风格

       ● 初始化配置项目依赖

       ● 提供单文件组件--vue应用

vue-cli 的使用是通过命令行的方式操作的。

vue-cli 的安装和搭建项目的流程： 

       ● 安装:   npm install -g @vue/cli

                     vue --version 查看安装成功与否及版本

                     npm update -g @vue/cli 更新包

       ● 项目搭建:

             ① 创建项目： vue create project-demo 创建一个以项目名为名称的目录。以下有几点注意下：

                            ◼ 选择预设功能Preset：选择当前项目依赖于哪些工具（babel语法降级工具，eslint语法风格检测工具，手动选择功能-自定义）。

                            ◼ 自定义预设：点击空格 选择与取消；回车 完成，再选择vue版本，history/hash模式，css预处理器，eslint，最后选择相关配置文件保存在哪里（分开存/pakge.json文件中）,最后给预设起名。

                            ◼ 其中自定义的预设会保存到c盘用户目录下，“ .vuerc文件 ”，再次创建项目时，也会有这个自定义的选项。

                            ◼ 选择包管理器：选择当前项目要安装的包的方式（yarn或npm）。

            ② 创建完成

            ③ 运行项目：npm run serve（运行时要处于当前项目的目录下）

                ◼ vue-cli 的目录与文件:

                       文件目录:

                            |__根目录

                                     |——public           预览文件目录

                                     |__src

                                            |———assets     静态资源目录

                                            |___components 项目组件目录

                                            |___App.vue    根组件

                                            |___main.js    入口文件

                     

                ◼  单文件组件：将组件的功能统一保存在以.vue为扩展名的文件中,将传统的模板、视图、逻辑三部分保存在一起。

      一个vue文件中：

                 template  --  结构、模板

                <script>中的export default（es6里）-- 模块导出，导出的是当前组件（的配置对象）；

                import 导入组件，再将导入组件添加到当前组件的component中，作为当前组件的子组件；

                <style scoped>添加scoped，让此样式只在当前组件生效

                vue-cli将实例创建的步骤，单独放到了main.js 入口文件中，再实例化；；                    

            ④ 项目打包与部署:

                       ◼ 打包：就是将VUE CLI项目编译为浏览器可识别的文件

                                       npm run build

                                       打包完成后生成dist文件夹，文件结构：dist

                                                                                                          |——File

                                                                                                          |__Size

                                                                                                          |__Gziped

                           注意：dist文件是编译的产物，是不能修改的                  

                     ◼ 部署：将vue项目中的dist目录部署到服务器上；将文件根据后端提供的路径放入，后端服务器部署处理或将前端的vue项目独立的部署到服务器上，利用ajax和后端进行交互。

                                 本地部署 ———— 静态文件服务器部署：

                                  npm install -g serve  安装静态文件服务器

                                  在dist目录下直接使用serve命令部署  cd dist目录 --> serve /   serve dist