Vue-搭建脚手架CLI
cd node.js 文件夹
安装淘宝镜像服务器 :
npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli
cnpm install -g vue-cli安装webpack模板 :
vue init webpack myProject创建项目，并输入各种信息
选择有6kb那个、选择安装router、选择es6语法检查
yes yes no no安装依赖（进入刚刚创建的文件夹）
cnpm install安装路由
cnpm install vue-router --save-dev安装 axios http
cnpm install axios --save运行服务器
npm run dev打包 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
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'
