图片来源于网络;如有侵权请联系删除
对于创建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;想scss啊这些没有试过哈;在安装less的时候会出现一个报错;我查了很久;最后才发现是版本问题;
安装less 的时候 版本不得超过 4.10版本
大家按照下面的进行安装就没得问题;(仅限于在 less 上的问题哦)
npm install less less-loader --save-dev
npm install less-loader@4.1.0 --save