vue+vux+webpack快速構建

在這之前，你需要確定已經具備環境：node.js；vue.js；vue.cli；webpack；

目錄：

1.使用vue-cli 和 airyland/vux2 構建vux

2.如何在vue-cli中使用less

 

一、使用vue-cli 和 airyland/vux2 構建vux

# install vue-cli  
npm install -g vue-cli  
  
# init a webpack project with vuxjs/template  
vue init airyland/vux2 projectName  
cd projectName

# or cnpm install  
npm install  
npm run dev 

輸入 http://localhost:8123（端口在config里可以修改）即可查看

 

注：我們下載的官網模板，路由是以常量的形式寫在了main.js中，這里我們恢復到router/index.js中去

main.js

import Vue from 'vue'
import FastClick from 'fastclick'
import router from './router'
import App from './App'
// import Home from './components/HelloFromVux'

// Vue.use(VueRouter)

// const routes = [{
//   path: '/',
//   component: Home
// }]

// const router = new VueRouter({
//   routes
// })

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

 

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/HelloFromVux'

Vue.use(Router)

export default new Router({
  mode: 'history',    //history模式可以去掉url中的 '#'
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

 

二、如何在vue-cli中使用less

首先安裝less

npm install less less-loader --save-dev

其次在build/webpack.base.conf.js中加入一則less的rule

module.exports = {
    //  此處省略無數行，已有的的其他的內容
    module: {
        rules: [
          //  此處省略無數行，已有的的其他的規則
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

搞定