Vue 学习之路（三）

前言

本文章结合VUE核心技术-尚硅谷的17-34集做的归纳总结。

Vue Devtools

安装浏览器的Vue插件可以很方便 Debug Vue 下载地址
使用Chrome内核的浏览器打开 crx 文件就可以自动安装插件到浏览器上了
安装完成就可以在浏览器上找到插件
我们打开一个用 Vue 开发的网页，然后按 F12 进入控制台
控制台就会多出一个 Vue 的标签

创建 Vue 项目

安装步骤 (先确保电脑安装了 node.js 或者 yarn)

打开命令行输入 npm install -g vue-cli 全局安装 vue-cli

跳转到项目路径下输入 vue init webpack vue_demo 使用 webpack 打包方式初始化 vue-cli

这个时候会需要输入一些选项来配置项目，根据需求配置即可。

操作完成之后会在目录下多出 vue_demo 文件夹，输入 cd vue_demo 跳转到文件夹

输入 npm install 安装工程插件

输入 npm run dev 开启服务器用于本地访问

在浏览器中输入 http://localhost:8080/ 就可以访问到 vue-cli 搭建的初始网页

认识 Vue Cli

完成项目创建之后，项目路径下会有如下的文件

进入config文件夹，打开 index.js 可以进行一些启动配置

键入src文件夹，可以看到如下文件

main.js 入口函数和外部的 index.html 照相呼应。
这里填入的el元素来自于 index.html 的元素
同时引用 App.vue 进行组件注册

App.vue 是vue的模板文件包含三个模块 templete script style

通过引入外部组件就可以实现自定义的HTML标签

项目打包与发布

项目开发完之后执行 npm run build 会读取build文件夹中的配置
最后生成一个完整的页面存放在 dist 目录下
打包完成的网页构建服务器才可以访问。（主要原因是资源路径都是通过根目录索引，没有服务器站点无法获取正确的根目录解决方案）

搭建服务器有很多方法

npm 静态服务器

npm 安装 serve 模块 npm install -g serve

然后再dist上层目录执行 serve dist

浏览器输入 localhsot:5000 访问

vscode liveserver 静态服务器

安装vscode liveserver 插件

去到 dist 根目录，然后右键 Open with Code

打开html文件点击状态栏上的 Go Live 按钮就可以自动打开网页

动态服务器 - 不再赘述

Tomcat

Apacahe

Ngnix

Apache&Ngnix 可以安装 phpStudy 或者 wamp 快速配置服务器环境