vue-cli脚手架搭建项目整理笔记
笔记是整理之前开发外卖APP的整个设计框架和搭建基础以及如何修改配置方面。老实说第一遍写的时候脑袋装不下，第一次开发时自己手写了些笔记，但是当时恨不得把整个全写下来，可是内容太多了，就写了些关键的地方。写完后自己整个又搭建了一遍，对mock数据和配置修改熟悉了些，时间久了又忘了一些，并且现在又没有vue的项目了就想记录一下，隔断时间看下也不至于以后接手项目又重头找资料搭建。
一、全局安装vue-cli、webpack
使用的webpack模板，新建项目vue init webpack myapp，等待安装会出现一些提示选择回车直到安装完毕
二、目录
static是一个空目录，保存第三方静态资源的，gitkeep文件作用当static为空时也能将该目录提交到git仓库，正常情况该空目录是无法提交到仓库的。
package.json中的devDependencies表示开发编译时的依赖（实际项目上包该放在devDependencies还是dependencies?
参考http://www.bubuko.com/infodetail-2223279.html
-
dependencies存放项目或组件代码中依赖到的 -
devDependencies存放测试代码依赖的包或构建工具的包
）
后面是一些语法的配置文件相关，比如bable是吧ES6转成ES5的，eslintgnore是忽略部分js文件检查，eslintrc.js中的rules可以修改规则检查；
npm run dev实际是运行的package.json中指示的文件webpack.dev.conf.js（见下面代码），该文件中有运行时的基础配置文件webpack.base.conf；
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
webpack.dev.conf.js中的相关配置如下：plugns部分（热加载）
new webpack.HotModuleReplacementPlugin(),热加载插件
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',后面生成的文件
template: 'index.html',为模板中的index
inject: true css、js文件路径插入到新生成的html中
}),
webpack.base.conf中的相关配置如下：入口文件js，输出路径，简写设置（蓝色部分引入文件自动补全后缀名；红色部分，引入组件时常写的路径太长可以设置简写符号，下面的是默认符号）
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,此为config文件夹下index.js中build部分
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
在需求分析和项目资源准备好后导入resource文件;
SVG文件矢量文件（不会因为放大图片改变其质量不会变化），转换成图标字体（通过网址https://icomoon.io/）,下载解压后只需要font字体和style.css放入项目中；
在src下新建common目录，增加font（放入图标字体）stylus（放入style.css修改为icon.styl并修改格式去掉多余分号和括号）、js；
使用stylus必须安装模块及其依赖npm install stylus stylus-loader --save-dev；
vue-loader依赖postcss插件实现css兼容
三、模拟数据
“./”表示当前路径
script中引入文件的路径默认是写相对路径，script通过export default{}导出对象
请求静态资源两种方式，最后都是通过/api/seller访问资源
第一种直接通过路由方法
const data=require('../data');
const seller=data.seller;
const express = require('express');
const app = express();
然后在devServer中添加
before(app){
app.get('/api/seller', function(req, res) {
res.send({
error:0,
data:seller
});
})
}
第二种Router 实例
const data=require('../data');
const seller=data.seller;
const express = require('express');
const approuter=express.Router();
before(app){
approuter.get('/seller', function(req, res) {
res.json({
error:0,
data:seller
});
});
app.use('/api',approuter);
}
四、eslint设置
'semi': 0,去掉分号结尾
'comma-dangle': ['error', 'never']去掉尾随的多余逗号
还有很多语法检查的错误
五、组件
index.html修改meta移动端属性，引入reset.css样式；
script中导出export default，跟module.export的区别
六、vue-router，vue-resource的使用
1、vue-router
由于默认新建项目时已自动安装了，只需跟着官方文档找需要使用的api就可以了，
外卖APP用到了以下三方面：
默认路由：在main.js中设置
router.push('/message');
路由切换时动态添加样式：类名在app.vue中设置后，在router.js中添加属性和值，值为类名
linkActiveClass: 'active',
去掉路径#号：
mode: 'history',
2、vue-resource
安装后注册，在入口函数
import Resource from 'vue-resource';
Vue.use(Resource);注册
使用
created(){}
