怎么使用vue-cli来搭建vue项目和webpack?

用vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个vue+webpack系列,先从项目构建说起——vue-cli.

由于是Vue+webpack这里就不赘述git那些东西,默认环境都配置好了。

第一步先建立一个文件夹我这里是apronew;

第二步在文件夹里面打开git bash,然后敲命令行npm install –global vue-cli,全局安装 vue-cli,如果已经全局安装可不用再装一次;

怎么使用vue-cli来搭建vue项目和webpack?

立即学习“前端免费学习笔记(深入)”;

第三步: 第二步成功之后,创建一个基于 webpack 模板的新项目敲命令行: vue init webpack test-vue-cli

怎么使用vue-cli来搭建vue项目和webpack?

 当完成第三步,进入到新init的文件夹此时是这样的

 怎么使用vue-cli来搭建vue项目和webpack?

第四步:安装依赖包,用命令行npm install(这里推荐用cnpm淘宝镜像,比较快)

安装过程是这样的

怎么使用vue-cli来搭建vue项目和webpack?

安装成功是这样的

怎么使用vue-cli来搭建vue项目和webpack?

此时就可以进行最后一步跑起来啦;

第五步:npm run dev;(至于为什么是run dev 以及这个命令行敲完干了些什么日后再补上)

如果有依赖没安装上,这一步会有报错,继续安装一下响应的依赖就行了;出现以下状态就表示大功告成啦!

怎么使用vue-cli来搭建vue项目和webpack?

 

怎么使用vue-cli来搭建vue项目和webpack?

用Vue 脚手架构建项目结束!

 

以上就是怎么使用vue-cli来搭建vue项目和webpack?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2910675.html

(0)
上一篇 2025年3月11日 04:35:28
下一篇 2025年2月18日 12:42:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 分享webpack实例教程

    webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 安装 Webpack 在安装 Webpack 前,你本地环境需要支持 node.js。 由于 npm 安装速…

    2025年3月11日 编程技术
    200
  • Webpack的经验分享

    webpack 是一个模块打包器。它的主要目标是将 javascript文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package),本文主要和大家分享webpack…

    编程技术 2025年3月10日
    200
  • webpack混用css module的方法

    这篇文章主要介绍了webpack项目轻松混用css module的方法,内容挺不错的,现在分享给大家,也给大家做个参考。 前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-m…

    编程技术 2025年3月10日
    200
  • 关于webpack项目混用css module的方法

    这篇文章主要介绍了webpack项目轻松混用css module的方法,内容挺不错的,现在分享给大家,也给大家做个参考。 前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-m…

    编程技术 2025年3月10日
    200
  • Webpack使用命令行进行安装 的步骤

    本篇文章给大家带来的内容是关于Webpack使用命令行进行安装 的步骤,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 weback命令行安装 第一步: npm install webpack -g           //…

    编程技术 2025年3月10日
    200
  • 建立demo配置webpack环境的方法介绍

    本篇文章给大家带来的内容是关于建立demo配置webpack环境的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、建立一个demo 2、进入建立的webpack_demo目录下创建一个dist文件夹(用于生产)…

    编程技术 2025年3月10日
    200
  • 如何解决webpack css url报错问题

    webpack css url报错是因为图片加载路径错误,其解决办法:首先打开相应的代码文件;然后打包样式中的背景图;最后重新添加publicPath即可。 本教程操作环境:Dell G3电脑、Windows7系统、webpack3.0&a…

    2025年3月10日 编程技术
    200
  • 聊聊css为什么需要模块化?怎么进行模块化?

    你的 css 也需要模块化 css “局部”样式 sass、less 通过 @import ,部分解决的 css 模块化的问题。 由于 css 是全局的,在被引入的文件和当前文件出现重名的情况下,前者样式就会被后者覆盖。在引入一些公用组件,…

    编程技术 2025年3月10日
    200
  • favicon 不只是个图标

    favicon 的概念 favicon 中文译名是收藏夹图标,不仅是网站的头像,也是其可以让浏览器的收藏夹中除了显示相应的标题外,还以图标的方式区分不同的网站。 浏览器的支持 FF 浏览器还支持动态的 favicon,让你的网站更有个性 一…

    编程技术 2025年3月9日
    200
  • webpack中配置多对多的实现(附代码)

    本篇文章给大家带来的内容是关于webpack中配置多对多的实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 webpack是一个优秀的打包平台, 可以把sass, 图片, 字体等静态资源全部打包到js中 作者最…

    编程技术 2025年3月9日
    200

发表回复

登录后才能评论