Vue+Webpack搭建前端脚手架

最新推荐文章于 2022-12-23 02:31:53 发布
最新推荐文章于 2022-12-23 02:31:53 发布
阅读量182 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44405007/article/details/97001401
版权

第一步：安装node，配置node-cache，node_modules，
指令如下：

npm config set prefix "D:\software\node-v8.9.3-win-x86\node-global"
npm config set cache "D:\software\node-v8.9.3-win-x86\node-cache"

第二步：
配置cnpm npm访问国外太慢

npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

第三步： 安装项目所需的vue和webpack 使用vue初始化项目

cnpm install vue -g
cnpm install webpack -g
cnpm install -g vue-cli
vue init webpack

第四步： 下载 vue项目所依赖的项目模块

cnpm install
npm run build
npm run dev

在这里插入图片描述

第五步：
在浏览器访问指定的运行后提示的网址 localhost：8080
在这里插入图片描述

至此简单的脚手架搭建完成！

千峰铭晓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack4 从0开始搭建前端模块化脚手架
寂寞的搬运工的博客
03-03 525
webpack 搭建前端模块化脚手架 webpack简介 官网地址 引用官网的一段描述：webpack是一个现代的javascript应用程序的静态模块打包器，在webpack处理应用程序时他会递归的创建一个依赖关系图，其中包含应用程序的需要的每个模块，然后将这些模块打包成一个或多个bundle。webpack默认的配置文件是webpack.config.js。 在webpack中最核心的有四个概...
webpack搭建vue脚手架
Heartbroken_man的博客
08-31 2406
搞了几天的webpack5.0版本搭建vue脚手架项目，今天分享一下！ 在读这篇文章之前你可能需要了解一些webpack的配置才行 否则可能看不懂部分配置 首先我们的项目的src目录结构如下 基本上与vue-cli3的结构一样 ，你可以直接创建vue-cli3的脚手架直接复制里面的项目目录结构 新增命令行 在package.json文件里面的scripts字段里面新增这样一条命令，这样我们就可以在控制台输入npm run build执行webpack.config.js里面的配置 "bu
webpack 构建脚手架
很酷的站长的博客
12-23 1594
总结: css-loader 只负责加载 css 文件，并不会将样式添加到 dom 中，需要通过 style-loader 将样式添加到 dom 中。webpack 配置文件中的 module 配置项中的 use 使用多个 loader 时，加载顺序是从右到左的。第三步: 安装 style-loader，然后将 style-loader 引用到 webpack 的配置文件中, 重新打包样式则已加载到 dom 中了。在 webpack.config.js 中的 plugins 中配置插件。
前端必不可少的脚手架
chuanglan253的博客
11-11 5933
前端必不可少的脚手架 关于打包东西的了解程度渐渐地也现已成为衡量前端开发工程师水平的一个重要目标。 记住在校招面试的时分就有问各种打包东西的问题，如关于 Gulp、Grunt、Webpack 的了解程度，各种打包东西的特色及优缺点等。 而当我们逐步融入到一个特定的团队中，一般都有现成的脚手架提供给我们运用，而关于脚手架自身的重视程度也会渐渐下降。 那是否就意味着，不需求把握脚手架的相关常识
webpack多页面脚手架基于webpack的前端工程化开发解决方案
08-10
webpack 多页面脚手架，基于webpack的前端工程化开发解决方案
使用webpack搭建vue脚手架
m0_59537414的博客
12-04 341
使用webpack搭建vue脚手架，便于了解vue以及webpack
看懂前端脚手架你需要这篇WEBPACK
weixin_34109408的博客
11-03 227
本文转载自网络。转载编辑过程中，可能有遗漏或错误，请以原文为准。 原文作者：二口南洋 原文链接：https://gold.xitu.io/post/586ddb8ab123db005d0b65cb Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模...
新手Vue脚手架搭建 Webpack
咕咕攻城狮
07-12 3876
  安装node.js   首先需要下载 nodeJs 官网   next 安装完成后   打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了   安装cnpm       nodejs有自带的 npm但是国外的下东西比较慢     $  npm install -g cnpm --registry=https://registry.npm...
webpack4搭建多页面脚手架（一）
talen123的博客
06-22 7450
开始的开始步入前端已经一年多了，真心的体会到前端世界变化莫测，从jquery到vue，也算经历了一场大前端的变革。而在这几年，webapck的呼声越来越高。远超gulp，grunt等打包工具。平时使用vue-cli时用得biu顺，等到自己搭的时候就有点捉襟见肘了。（本次使用的是webpack4以上，小心踩坑，注意脚下）项目的初始化使用npm init进行初始化操作 ，初始化界面会要求你输入对应的配...
前端构建之webpack+react 脚手架
09-22
前端构建之webpack+react 一个简单的脚手架
Webpack4-WEB:这是一个框架无关的基于Webpack4构建的前端开发脚手架
05-13
Webpack4配置备忘录 版本 : webpack 4.10.2 入口文件 ：./src/index.js 输出目录 ：./dist 支持 ：ES6语法、代码压缩、代码分割、Eslint语法检查、Less、Sass、Stylus、自动补全浏览器兼容css代码、源代码映射、本地服务器、热更新、热模块加载、文件清理、静态文件拷贝 用到的命令行： npm init -y // 初始化 npm i webpack webpack-cli -D // webpack 核心 npm i html-webpack-plugin html-loader -D // 动态生成html插件 npm i mini-css-extract-plugin -D // 动态生成css文件插件 npm i style-loader css-loader less-loader sass-loader node-s
Vue+webpack搭建自己的脚手架
weixin_33770878的博客
03-24 157
一, 初始化自己的项目 (1). 初始化npm npm init <!--一路回车，会生成package.json文件--> 复制代码 (2). 在根目录下新建src， build 文件夹，新建index.html作为html模版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
前端技术babel的安装与使用
namehao465的专栏
07-03 1415
babel安装 安装依赖包 cnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node cnpm install --save @babel/polyfill 根目录创建文件babel.config.js const presets = [ ["@babel/env",{ targets:{ edge:"17",
（1）Vue 学习----脚手架、webpack
仅此一❤
09-18 133
Vue 入门文章 https://cn.vuejs.org/v2/guide/instance.html 1、安装脚手架 使用下列任一命令安装这个新的包： npm install -g @vue/cli # OR yarn global add @vue/cli 用这个命令来检查其版本是否正确 (3.x)： vue --version # OR vue -V 2...
不使用vue脚手架 搭建项目（webpack简单配置）
aGreetSmile的博客
08-14 2555
前言 今天介绍一篇关于工程搭建的文章。主要介绍不用cli脚手架搭建一套前端工程，因为每个公司不是用脚手架工具安装一下就能进行开发了，很多时候都是对工程有一定的定制需求，你没有深入的去了解cli脚手架的话，可能会很吃力，所以这块还是需要有一定的深入了解的，内容也不是太复杂，但是你需要掌握一些vue、webpack、nodejs的简单的基本概念和认识，也挺适合初级者阅读，我们学前端的小伙伴其实都知道，前端的工程搭建不像后端，后端有一套非常健全的ide开发工具，我们不管做什么样子的项目，企业级应用的话，用j.
学习记录——vue结合webpack搭建脚手架
sakura_zr的博客
01-30 290
现在所有的逻辑需要在一个html里面写 希望 完整的目录结构 将vue工程化 也就是将目录区分开 asset静态资源 conponents公共组件 utils工具方法 router路由 views页面 等等 问题2：vue的逻辑 都是在一个newVue里面写的 解决：逻辑可以分开写 xxx.vue单独抽离这个逻辑，div、style、script都能存在 webpack结合vue搭建完整的脚手架 结构更完整，逻辑更清晰，打包上线，工程化 vue-loader实现加载 xxx.vue文件 相关插件 w
用webpack手动Vue搭建脚手架《一》
sunmeng_sunmeng的博客
10-27 373
webpack 就是一个打包工具。 创建项目，在根目录行下运行 npm init -y 命令， 初始化包管理配置文件 package.json 新建src 文件夹 --> 建index.html 以及 index.js （ES6模块化语法导入 规定要用import ~ from ~） index.html 文件 <ul> <li>happy111&lt...
Vue和前端工程化、webpack的基本使用（模块化、脚手架使用）
qq_42964711的博客
07-31 278
###今日目标 1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架 5.掌握Element-UI的使用 ###1.模块化的分类 ####A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js ####B.服务器端的模块化 服务器端的模块化规范是使用Comm
vue脚手架和webpack
最新发布
12-31
Vue脚手架和Webpack是两个常用的前端开发工具。Vue脚手架是一个用于快速搭建Vue.js项目的命令行工具，它提供了一套项目结构和开发环境的模板，可以帮助开发者快速开始Vue.js项目的开发。而Webpack是一个模块打包工具，它可以将项目中的各种资源（如JavaScript、CSS、图片等）打包成静态文件，以便在浏览器中加载。 下面是一个使用Vue脚手架和Webpack的示例： 1. 首先，安装Vue脚手架： ```shell npm install -g @vue/cli ``` 2. 创建一个新的Vue项目： ```shell vue create my-project ``` 3. 进入项目目录： ```shell cd my-project ``` 4. 启动开发服务器： ```shell npm run serve ``` 5. 在浏览器中访问 http://localhost:8080，你将看到一个基本的Vue应用程序。 在上述示例中，我们使用了Vue脚手架创建了一个新的Vue项目，并使用Webpack作为项目的打包工具。通过运行`npm run serve`命令，我们启动了一个开发服务器，可以在浏览器中实时预览我们的应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值