快速创建好一个Vue的项目

1.npm init webpack 名字

2.安装element-ui（这里我安装自己较为喜欢的iview,element-ui也挺好，但是状态框有Bug）

npm i element-ui -S

然后在main.js添加

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

 3.安装less，并创建全局(less的版本不能过高)

npm install less --save

npm install less-loader@4.1.0 --save

// 全局css设置
import './index.less'

 

4.安装vuex

npm install vuex --save

import store from './store' // 在main.js里面创建

创建store/action.js

// 改变数据的时候使用
// {commit}表示接收的方法
export const changeName = ({commit}, newName) => {
  commit('Username', newName)
}

创建store/getters.js

// 返回所有的数据 一般数据类型就这样写
export const getUsername = state => state.name

export const gettersdata = state => state

创建store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'

import * as mutations from './mutations'
import * as getters from './getters'
import state from './rootState'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态 一般是初始状态
  state,
  // 得到用户的状态等等
  getters,
  // 更改用户的状态 这里写的是一个function的名字，具体方法调用mutations里面的
  actions,
  // 这就相当于methods
  mutations
})
export default store

创建store/mutations.js

// 设置状态 mutationsMsg是一个方法
export const Username = (state, newName) => {
  state.name = newName
}
// 表情
export const mutationsMsg = (state, payload) => {
  state.msg = payload.msg
}

创建rootState.js

// 初始化状态

const state = {
  
}
export default state

 

 5.修改router

router/index.js

import Vue from 'vue'
// import ElementUI from 'element-ui'
// import { Loading } from 'element-ui'
import iView from 'iview'
import Router from 'vue-router'
import routers from './routers'
// let loading
// 使用VueRouter
Vue.use(Router)

// 创建VueRouter实例
const router = new Router({
  mode: 'history',
  routes: routers
})

iView.LoadingBar.config({
  color: 'rgb(0, 167, 224)',
  failedColor: 'rgb(0, 167, 224)',
  height: 3
})

router.beforeEach((to, from, next) => {
  iView.LoadingBar.start()
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

router.afterEach((transition) => {
  iView.LoadingBar.finish()
})
export default router

router/routers.js

import Index from '@/views/index'

export default [
  {
    path: '/index',
    name: 'index',
    meta: {
      index: 0,
      title: ''
    },
    component: Index
  }
]

 

 6.安装动画

npm install animate.css –save

// 定义动画
import animate from 'animate.css'

 

 7.使用阿里云图标

接下来复制链接地址，在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址....

<link rel="stylesheet" href="//at.alicdn.com/t/font_528709_jntwl1twn4yj5rk9.css">
接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。

<i class="iconfont  icon-zitigui-xianxing"></i>

不在使用在线方法，因为感觉依旧很麻烦，所以换为离线使用模式

// 首先 main.js 导入
import 'assets/icons/iconfont.css'


// 然后 将下载下来的文件 放进去就可以用了

 

8.修改main.js

Vue.use(iView, mavonEditor, animate)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})