Vue全家桶安装

Vue-搭建脚手架CLI

1. cd node.js 文件夹

2. 安装淘宝镜像服务器 :
   npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装vue-cli
   cnpm install -g vue-cli

4. 安装webpack模板 :
   vue init webpack myProject

5. 创建项目，并输入各种信息
   选择有6kb那个、选择安装router、选择es6语法检查
   yes yes no no

6. 安装依赖（进入刚刚创建的文件夹）
   cnpm install

7. 安装路由
   cnpm install vue-router --save-dev

8. 安装 axios http
   cnpm install axios --save

9. 运行服务器
   npm run dev

10. 打包 npm run build

//打包时index.js
assetsPublicPath: './',

productionSourceMap: true,

路由里的`mode: 'history'`注释掉`// 后端支持可开`

注意：如果开启history模式，后端就无法返回404页面了，所以前端需要对所有情况做一个统一处理，这里可以写一个404页面或者像我一样返回主页
 {
     path: '*',
     redirect: '/index'
}

• package.json

// 写在 devDependencies
"babel-polyfill": "^6.0.0",    //转义ES6语法


"keycode": "^2.1.9",      // 键盘事件支持
"fastclick": "^1.0.6",           //点击无300ms延迟
"jsonp": "^0.2.1",              //jsonp请求
"axios": "^0.17.1",             //axios请求
"vue-lazyload": "^1.1.4",   // 图片懒加载插件
"vuex": "^3.0.1",               // 状态管理
"create-keyframe-animation": "^0.1.0",   // 动画插件
"js-base64": "^2.4.0"   // base64解码
'lyric-parser': "^1.0.1"    //歌词插件1
"better-scroll":  滚动插件
"good-storage": "^1.0.1"   // web存储

vue-cli支持scss

安装Ruby

vue-cli中已经内置配置好了sass 以及lass的配置。
如果需要的话直接下载两个模块就可以了
webpack它会根据 lang 属性自动用适当的加载器去处理。

npm install node-sass --save-dev  
npm install sass-loader --save-dev  

安装Mint UI组件库

cnpm i mint-ui --save      //安装Mint UI组件库

//安装 babel-plugin-component：
cnpm install babel-plugin-component -D  

//根目录.babelrc 文件修改为:
{
 "presets": ["es2015", "stage-2"],
 "plugins": ["transform-runtime", ["component", [
   { "libraryName": "mint-ui", "style": true }
 ]]],
 "comments": false
}

// 按需引入
import Vue from 'vue'
import App from './App.vue'
import { Button, Cell } from 'mint-ui'

import 'mint-ui/lib/style.css'  //样式文件需要单独引入

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)

安装Vuex 全局状态管理工具

 //安装Vuex
cnpm install vuex --save

//store文件夹下index.js使用
import Vuex from 'vuex'

const state = {}; // 初始值
const getters = {}; // 相当于vue计算属性
const mutations = {}; // 改变state
const actions = {}; // 异步分发

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

安装axios http请求

"axios": "^0.17.1", 

配置
import axios from 'axios'
axios.defaults.baseURL = '你的接口地址';   //配置接口地址

安装jsonp jsonp跨域请求

 "jsonp": "^0.2.1",

import originJsonp from 'jsonp'

安装vue-lazyload图片懒加载

安装fastclick点击无300ms延迟

"fastclick": "^1.0.6",
// main.js引入
import fastclick from 'fastclick' // 点击无300ms延迟

引入babel-polyfill转义es6语法

// main.js 直接引入，无需安装
import 'babel-polyfill'