Vue+webpack 创建项目

最新推荐文章于 2024-09-14 10:29:57 发布
最新推荐文章于 2024-09-14 10:29:57 发布
阅读量270 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DHLSP15/article/details/106188481
版权

Vue+webpack 创建项目

安装nodejs

  1. 首先前往nodejs官网（http://nodejs.cn/）下载nodejs
    在这里插入图片描述
  2. 然后点击安装，选择自己要安装的路径，此处我选择的是：D:\Program Files\nodejs，安装至完成。
  3. window+R，输入cmd，打开命令提示符窗口，输入：npm -v
    在这里插入图片描述

安装 vue-cli

  1. window+R，输入cmd， 打开命令提示符窗口，输入npm install --global vue-cli，全局安装vue-cli。
  2. 安装完成后，使用vue -V，查看vue的版本。

安装cnpm

cnpm：淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

  1. window+R，输入cmd， 打开命令提示符窗口，输入npm install -g cnpm --registry=https://registry.npm.taobao.org，安装cnpm。
  2. 安装完成后，使用cnpm -V，查看cnpm的版本。

vue项目介绍

  1. window+R，输入cmd， 打开命令提示符窗口，输入vue init webpack my-project，创建my-project项目。
    在这里插入图片描述
  2. 创建完成，项目目录介绍。
    在这里插入图片描述

项目创建流程

Mon 06 Mon 13 安装vue 创建vue项目 npm run dev运行项目 安装nodejs vue项目创建流程
DHLSP15
关注
专栏目录
使用webpack搭建一个VUE工程项目
qq_41876727的博客
09-30 283
使用webpack搭建一个VUE工程项目`webpack` 工作原理构建一个`webpack`工作环境over若有问题，敬请指教！ webpack 工作原理 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每...
使用webpack创建vue项目
gdyhvy的博客
05-14 787
创建空文件夹 文件夹下执行：npm init 安装 webpack webpack-dev-server vue vue-loader npm i webpack-dev-server vue vue-loader 创建目录结构 main.js 中添加代码 //main.js import {createApp} from "vue"; import App from './app' const app = createApp(App) app.mount('#app') 在..
用vue-cli来搭建vue项目和webpack
weixin_30648587的博客
11-24 92
vue-cli 用vue-cli来搭建vue项目 第一步：全局安装vue-cli 1 sudo npm install vue-cli -g 第二步：初始化一个项目 1 vue init webpack-simple projectName 第三步：把文件...
使用Webpack创建vue脚手架并搭建路由---详解
最新发布
m0_74079648的博客
09-14 1170
Webpack配置vue3以及vue-router vue 是一个非常好用的 javascript 库，现在已经发行了 vue 3，我们可以直接导入使用库文件，也可以使用单文件（SFC）的形式，直接使用库文件会简单一点，我们先来试一下吧。
使用webpack搭建vue项目；webpack+vue
weixin_57265841的博客
04-10 4981
使用webpack搭建vue项目;webpack+vue
基于Vue 和 webpack的项目实现
weixin_33981932的博客
04-06 204
Vue.js 是一款极简的 mvvm 框架，如果让我用一个词来形容它，就是 “轻·巧” 。如果用一句话来描述它，它能够集众多优秀逐流的前端框架之大成，但同时保持简单易用。废话不多说，来看几个例子： <script src="vue.js"></script> <div id="demo"> {{message}} <input v-mo...
VUE-webpack
25氪
07-07 304
webpack基础使用 1.初始化包环境，自动下载package.json配置文件 yarn init 2.安装依赖包，vue包 yarn add webpack webpack-cli -D 3.在package.json里配置 4.根目录创建src目录，在src目录创建入口函数main.js文件 5.根目录创建配置入口出口webpack.config.js 6.填入配置项 const path = require("path") module.exports = {
vue2 + webpack5相适配的 能成功打包的 package.json 文件
08-25
适宜人群：想要学习 webpack 配置的，各个版本之间出现问题的，想要解决各种配置报错的，想要 vue2 + webpack5 成功创建项目的都可以； 小记：这只是配置的 package.json 文件，更有配置好的 webpack.config.js ...
vue2+webpack搭建h5框架
03-12
2. **初始化项目**：使用Vue CLI创建一个新的Vue项目，可以选择webpack模板。 3. **配置Webpack**：根据项目需求，自定义Webpack配置，例如设置别名、调整输出路径、引入加载器等。 4. **创建Vue组件**：根据项目...
electronic-vue-webpack：最小的Electron + Vue 2 + Webpack 2设置可快速开发
02-04
厌倦了找到不需要真的花哨的插件的Electron / Vue2 / Webpack2模板？ 尝试使用这种很少依赖的最小模板，以进行快速开发和原型制作。 安装 # Clone the repository once $ git clone ...
浅谈vue+webpack项目调试方法步骤
08-29
Vue CLI是Vue官方提供的项目脚手架，它能快速创建和配置Vue项目，包括自动集成Webpack。通过全局安装`vue-cli`，然后使用`vue init webpack my-project`命令，可以创建一个新项目。Vue CLI预设了合适的Webpack配置，...
Vue+webpack
mr_zheng0_0的博客
04-12 497
最近在内部项目中做了一些基于 vue + webpack 的尝试，在小范围和同事们探讨之后，还是蛮多同学认可和喜欢的，所以通过 blog 分享给更多人。首先，我会先简单介绍一下 vue 和 webpack：(当然如果你已经比较熟悉它们的话前两个部分可以直接跳过)介绍 vueVue.js 是一款极简的 mvvm 框架，如果让我用一个词来形容它，就是 “轻·巧” 。如果用一句话来描述它，它能够集众多优...
vue+webpack
大哼的小世界
04-16 872
1.npm init 2.npm install webpack --save-dev //本地安装webpack 3.webpack -v //查看webpack版本，看是否安装成功 4.npm install -g vue-cli //安装vue-cli脚手构建工具 通过以上步骤，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目 5.使用命...
WebPack创建vue项目
qq_38946351的博客
06-08 192
官网下载 node.js 打开窗口命令行 可以先查看自己的npm版本 然后下载安装cnpm（镜像） npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli 下载成功查看 初始化Vue项目（脚手架） 运行项目 安装（下载）依赖 ...
webpack 创建VUE项目
G_whang的博客
08-10 1156
下载地址：https://nodejs.org/en/进入 到新建项目中，然后输入命令 初始化。下载完成以后点击安装，全部下一步即可。全局安装webpack 输入命令。安装完成后输入命令 查看。至此，创建vue项目完成。安装完成，输入命令验证。安装完成输入命令验证。
webpack创建vue项目
沙漏的前端笔记
05-12 183
写在前面：以前都是用的vue创建项目，新公司要求使用webpack创建项目，记录下来以防忘记 * 使用之前请先确认安装了node.js，不会安装请自行百度 安装vue-cli vue2.x npm install -g vue-cli 卸载 npm uninstall -g vue-cli 最新版本vue-cli npm install -g @vue/cli 卸载 npm uninstall -g @vue/cli 查看是否安装成功 // 注意 -V 的 V 是大写 vue -V vue -
Vue+webpack项目基础配置全面指南
2. **配置Webpack**：在项目结构中，创建`src`文件夹并放置`app.vue`（包含模板、数据和样式）作为主代码文件，以及`index.js`作为入口点。`app.vue`示例代码展示了一个简单的Vue组件，有文本显示和CSS样式。 3. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值