技术博客

用webpack创建vue项目/脚手架

admin2020-12-28 15:51 546人已围观

简介对于创建vue项目有很多种方法；但是我觉得这种是相对比较方便的；不用去配置打包啊一些配置了；而且操作也是非常简单；只需要几步就可以了；现在我就来跟大家；演示一哈

对于创建vue项目有很多种方法；但是我觉得这种是相对比较方便的；不用去配置打包啊一些配置了；而且操作也是非常简单；只需要几步就可以了；现在我就来跟大家；演示一哈

第一步：

vue init webpack demo（demo项目名称）

注意：在安装以前确认自己是否安装了 @vue-cli；如果没有安装的话就安装一哈；

npm install -g @vue/cli

第二步：

看图说话；然后根据自己的需要进行配置；

用webpack创建vue项目/脚手架

图片来源于网络；如有侵权请联系删除

注意：这儿是没得配置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, // vuex
  render: 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


  • 微信公众号

很赞哦！(0)
注：本文转载自头条，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除。

上一篇：我们穷极一生，究竟追寻的是什么？

下一篇：oracle rac问题排查思路

相关文章

文章评论


评论0

    站点信息

    • 微信公众号：扫描二维码，关注我们

    点击排行

    除了 Windows，你可知微软出品了不少“神器”

    本栏推荐

    国海证券：新材料产业周报：日本成功开发全球首个高速6G无线设

    标签云

    猜你喜欢