vue项目的一些总结

• 开始项目vue init webpack 项目名

• 安装依赖npm install

• 运行项目npm run dev或者npm run start

• 关闭eslint校验

  • 项目目录下的build目录下的webpack.base.conf.js文件
    • module模块中的rules有关eslint的规则注释掉
      

• 配置路径别名

  • 项目目录下的build目录下的webpack.base.conf.js文件
    • resolve模块中的alias
      

• 使用stylus

npm install stylus --save -dev
npm install stylus-loader --save -dev

• IE9及以下低版本浏览器对ES6语法不支持，下载babel-polyfill
  • npm install --save -dev babel-polyfill
  • 在main.js中引入import 'babel-polyfill
• 路由设置
  • src目录下的route目录下的index.js文件

• 为避免每次刷新都重新从服务器中加载内容，可以使用<keep-alive>标签给<route-view/>包裹起来，以节约资源
• 组件中用到计时器时要在destroy中将计时器清除
• 有些接口无法直接访问，需要使用代理方式抓取数据
  • 在build目录下的webpack.dev.conf.js中引入express、axios、body-parser
  • 在webpack.dev.conf.js文件中添加

const axios = require('axios')
const bodyParser = require('body-parser')
const express = require('express')  // nodejs开发框架express，用来简化操作
const app = express()    // 创建node.js的express开发框架的实例
var apiRoutes = express.Router()    // 编写路由
app.use('/api', apiRoutes) // 所有通过接口相关的api都会通过api这个路由导向到具体的路由

• 浏览器一次的刷新时间大概为17ms

mounted(){
	setTimeout(()=>{
		***
	},20)
}

• 可以使用vue-lazyload懒加载图片，用来优化网站性能
  • 引入vue-lazyload
  • 将:src换为v-lazy