您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

用webpack创建vue项目/脚手架

时间:2020-12-28 11:26:27  来源:  作者:
用webpack创建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 = false
new 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-dev
npm install less-loader@4.1.0 --save


Tags:webpack   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
图片来源于网络;如有侵权请联系删除对于创建vue项目有很多种方法;但是我觉得这种是相对比较方便的;不用去配置打包啊一些配置了;而且操作也是非常简单;只需要几步就可以了;现在我...【详细内容】
2020-12-28  Tags: webpack  点击:(298)  评论:(0)  加入收藏
webpack 对我来说曾经是一个怪物般存在一样,因为它有太多太多的配置项,相反,使用像create-react-app脚手架可以很轻松创建项目,所以有一段时间内,我会尽量避免使用 webpack,因为它...【详细内容】
2020-11-17  Tags: webpack  点击:(125)  评论:(0)  加入收藏
摘要:Webpack是一种前端资源构建工具,一个静态模块打包器。1. 摘要Webpack是一种前端资源构建工具,一个静态模块打包器。在Webpack看来,前端的所有资源文件(js/json/css/img/les...【详细内容】
2020-11-06  Tags: webpack  点击:(131)  评论:(0)  加入收藏
通过插件我们可以扩展webpack,在合适的时机通过Webpack提供的 API 改变输出结果,使webpack可以执行更广泛的任务,拥有更强的构建能力。 本文将尝试探索 webpack 插件的工作流程,进而去揭秘它的工作原理。同时需要你对webp...【详细内容】
2020-05-20  Tags: webpack  点击:(66)  评论:(0)  加入收藏
回想在2015-2016年的时候,开发者们开始渐渐把视线从大量使用Task Runner的Grunt工具,转移到Gulp这种Pipeline形式的工具。Gulp还可以配合上众多个性化插件(如gulp-streamify),从而使得整个前端的准备工作链路,变得清晰易控,...【详细内容】
2020-03-11  Tags: webpack  点击:(67)  评论:(0)  加入收藏
webpack简介: webpack 是一个前端资源加载/打包工具。 他将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源为什么使用webpack: 转换Es6语法 ...【详细内容】
2019-10-21  Tags: webpack  点击:(112)  评论:(0)  加入收藏
vue-cli全家套相信很多人都用过,但可能很多人不太清楚webpack为解决打包文件过大做了哪些事情,今天我们就主要来聊聊这个。 首先配置全局变量首先,通过指定环境,告诉webpack我们...【详细内容】
2019-09-10  Tags: webpack  点击:(314)  评论:(0)  加入收藏
Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人对升级 Webpack 还是一头雾...【详细内容】
2019-09-09  Tags: webpack  点击:(160)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条