圖片來源于網絡；如有侵權請聯系刪除

對于創建vue項目有很多種方法；但是我覺得這種是相對比較方便的；不用去配置打包啊一些配置了；而且操作也是非常簡單；只需要幾步就可以了；現在我就來跟大家；演示一哈

第一步：

vue init webpack demo（demo項目名稱）

注意：在安裝以前確認自己是否安裝了 @vue-cli；如果沒有安裝的話就安裝一哈；

npm install -g @vue/cli

第二步：

看圖說話；然后根據自己的需要進行配置；

圖片來源于網絡；如有侵權請聯系刪除

注意：這兒是沒得配置vuex的哈；需要自己創建好項目以后自己配置一哈；不過這個簡單

首先：安裝vuex

npm install vuex --save

然后在src 文件下創建一個store/index.js文件；并寫上

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 123
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

最后在main.js中引入注冊就可以了

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store, // vuex
  render: h => h(App)
})

第三步：

根據第二步圖的配置配置完了以后；就可以創建以下的這些文件說明就創建成功了；這是我們就可以

npm run dev // 啟動

本項目不需要配置其他的東西就可以直接打包

npm run build // 打包

打包成功以后在 dist文件 里面

這兒注意一哈：在打包以前需要在config/index.js里面進行修改

// assetsPublicPath:  默認是 ‘/’將其修改為‘./’
assetsPublicPath: './' 

安裝less注意事項

我這邊只試過less；想scss啊這些沒有試過哈；在安裝less的時候會出現一個報錯；我查了很久；最后才發現是版本問題；

安裝less 的時候 版本不得超過 4.10版本

大家按照下面的進行安裝就沒得問題；（僅限于在 less 上的問題哦）

npm install less less-loader --save-dev
npm install less-loader@4.1.0 --save