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(){}