本博客使用现代化的前端开发流程
即Vue.js+webpack构建个人博客单页应用
let's do it.
1. 安装vue-cli命令行工具
vue-cli是官方的命令行工具，我们用它生成一个配置完好的项目，这样我们就能直接上手开发了，而不用配置一大堆webpack相关的东西。
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
命令行输入：
// 国内推荐使用cnpm，要不安装的太慢了
npm install -g vue-cli
安装完成
2. 创建基于webpack的基础工程
进入你要创建项目的目录，
比如我的是workspace/Vue
输入以下命令
// 最后一个参数是项目名称，写自己的即可
vue init webpack blog-waka-by-vue
输入完成后按回车，会提示确认一些东西如下，默认一路回车就行了：
现在默认使用的是Vue2.x，如果要使用Vue1.x可以输入
vue init webpack#1.0 blog-waka-by-vue
要确认的东西
创建完成以后进入该项目目录，安装所需依赖，启动服务
// 进入该项目目录
cd blog-waka-by-vue
// 安装所需依赖
npm install
// 启动服务
npm run dev
浏览器应该会自动弹出来，不弹出来也没有关系，浏览器中输入localhost:8080，即可看到跑起来的工程
用喜欢的编辑器打开工程即可开始开发工作，我比较喜欢WebStorm，但是WebStorm打开项目的时候很大几率会卡死，因为依赖的node_modules太多的缘故，不知是否有人碰到过同样的问题
下图为目录结构，开发时只关注src目录即可
目录结构
3. ESLint格式不规范导致编译错误的解决方法
开发过程中因为安装了ESLint，所以当格式不规范时会遇到编译不通过的情况，比如：
我在src/main.js 下强迫症加了个分号
然后他就报错了...
错误截图
解决方案很简单，错误信息有个关键字，如图：
semi
在根目录 .eslintrc.js 文件的 rules 字段下加一行
// 0代表不做限制，错误提示有一个网页链接，可打开看到ESLint对该属性做的详细规定
'semi':0
即可，如图：
修改 .eslintrc.js 热更新不会生效，所以需要重启服务
重启服务
重启服务即可看到编译成功，网页显示正常
其他ESLint的编译错误也可通过该方式解决，这种方式是一种简单省事的做法，也可以通过点开ESLint错误的链接查看ESLint对特定属性定义的规则，从而更加严禁的使用ESLint。
复制该链接至浏览器即可进入ESLint官方文档
网友评论