用webpack创建vue项目/脚手架 _webpack

文章插图
图片来源于网络；如有侵权请联系删除
对于创建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 = falsenew Vue({el: '#app',router,store, // vuexrender: h => h(App)})

第三步：
根据第二步图的配置配置完了以后；就可以创建以下的这些文件说明就创建成功了；这是我们就可以
npm run dev // 启动

文章插图

【用webpack创建vue项目/脚手架】本项目不需要配置其他的东西就可以直接打包
npm run build // 打包打包成功以后在 dist文件里面
这儿注意一哈：在打包以前需要在config/index.js里面进行修改
// assetsPublicPath:默认是 ‘/’将其修改为‘./’assetsPublicPath: './' 安装less注意事项我这边只试过less；想scss啊这些没有试过哈；在安装less的时候会出现一个报错；我查了很久；最后才发现是版本问题；
安装less 的时候版本不得超过 4.10版本
大家按照下面的进行安装就没得问题；（仅限于在 less 上的问题哦）
npm install less less-loader --save-devnpm install less-loader@4.1.0 --save