vue-cli + webpack 搭建前端开发框架

前言：

首先我们知道，webpack内置的dev-server可以部署虚拟服务环境，所以利用这一点可以使用webpack搭建一个机遇vue开发的前端框架。

步骤一：

确保电脑上安装了node和管理工具npm，
查看方式：

$ node -v
$ npm -v

如果没有安装，请自行安装

步骤二：

全局安装webpack

$ npm i webpack -g

安装完成后使用以下指令查看是否安装成功

$ webpack -v

步骤三：

全局安装vue管理工具vue-cli

npm i @vue/cli-init -g

安装完成后使用 vue -V查看安装的版本，注意：版本V是大写的V@vue/cli的版本

步骤四：

通过vue管理工具vue-cli快速生成项目

$ vue init webpack myapp

具体其中的一些小问题：
①：‘myapp’为项目名，且不能包含大写字母
②：author作者随便填
③：Install vue-router? (Y/n) 【项目路由，一般需要，Y】
④：Use ESLint to lint your code? (Y/n) 【代码检查（编辑器自带），一般不需要，n】
⑤：Set up unit tests (Y/n)【单元测试，看需求，一般不需要，n】
⑥：E2E测试【E2E测试，看需求，一般不需要，n】
然后就等待 Installing project dependencies …
然后使用 cd myapp 进入项目文件夹下执行npm run dev即可，最后终端会提供一个链接，一般为：
Your application is running here: http://localhost:8080
在浏览器中输入该链接即可正常反问，关于端口:8080的修改在生成文件的config文件夹下的index中的dev中的port参数（这属于webpack的热服务知识了，可以翻一翻我的前几篇文章）
关于打包完成后图片、css以及js文件路径的问题，因为在本地是在dist下的static中，所以config→index.js→build下的assetsPublicPath属性值默认为：’/‘绝对目录，如果线上的项目不再根目录这些静态资源无法访问，将assetsPublicPath改成’./'即可

下一篇介绍：
1、router的参数分解，
2、路由跳转后页面title对应改变，
3、路由跳转后用户手动刷新页面页面title和地址栏路径和当前模块保持一致。