`
- 浏览:
621424 次
- 性别:
- 来自:
上海
-
1,打开http://nodejs.cn/download/,选择对应系统下载
2,查看node version
安装完成之后在开始-运行窗口,找到Node.js command prompt
或者 win+R键,输入cmd,
node -v
返回版本号
npm -v
返回版本号
3.基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/)
npm install -g cnpm --registry=https://registry.npm.taobao.org
获取到cnpm以后,我们需要升级一下,输入下面的命令
cnpm install cnpm -g
4.创建npm配置项
打开项目所在目录,eg: d:/idea_workspace/idea_vue
到这个目录后,输入
cnpm init
若是本地测试版,各种Enter之后,基本的打包配置就完成了。
5,安装一个全局的webpack
cnpm install webpack -g
6,项目里面也安装一个webpack
cnpm install webpack --save-dev
-------------------------------------------------------------------------
一、webpack -v 版本号出不来
提示:
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
解决办法:全局安装webpack-cli
cnpm install webpack-cli -g
就能提示出版本号了。
注意:使用webpack命令打包,报如下错误
d:\idea_workspace\idea_test\app>
webpack appjs/main.js public/webpack.js
Hash: 30a0f72fa4794e4d41bb
Version: webpack 4.1.1
Time: 80ms
Built at: 2018-3-16 10:17:02
1 asset
Entrypoint main = main.js
[0] ./appjs/work.js 28 bytes {0} [built]
[1] ./appjs/main.js 20 bytes {0} [built]
[2] multi ./appjs/main.js public/webpack.js 40 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
ERROR in multi ./appjs/main.js public/webpack.js
Module not found: Error: Can't resolve 'public/webpack.js' in 'd:\idea_workspace\idea_test\app'
@ multi ./appjs/main.js public/webpack.js
解决方式:在项目先创建好webpack的入口文件及打包目录,再次输入命令
webpack
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
5. `build` 和 `dist` 目录:这两个通常是Webpack打包后的产物,`build`可能包含编译过程的中间文件,而`dist`则存放最终部署的静态资源。 6. `说明.txt`:可能是项目作者提供的简要说明或者使用指南。 综上所述,...
使用 Webpack 作为预编译和打包工具,将.vue 文件预编译为浏览器端可运行的 JS 文件,并对各模块下的 JS 进行合并打包。 一、框架介绍 本文档将介绍使用 Vue、Vue-Router 和 Webpack 搭建单页面 Web 应用的框架。...
1.基于vue-cli来搭建单页面应用程序,Webpack进行实时打包 2.使用vue-router配置项目路由,vuex存储公共数据 3.使用MUI框架的图片轮播、图标、按钮、表单等组件优化界面,完成首页、登陆、注册等页面 4.合理使用钩子...
随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来。一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热...
它集成了React(一个由Facebook维护的前端JavaScript库,用于构建用户界面)、Node.js(一个基于Chrome V8引擎的JavaScript运行环境,用于后端开发)、Webpack(一个模块打包工具,处理前端资源的打包和优化)以及...
在现代前端开发中,Node.js作为后端脚本语言,Webpack作为模块打包工具,两者结合能构建出高效、模块化的应用。本教程将深入探讨如何在Node.js环境中利用Webpack进行项目配置,集成Vue.js框架,添加...
Webpack 是一个模块打包器,它根据模块之间的依赖关系将应用程序中的所有资源打包成一个或多个包(bundle)。首先,全局安装 Webpack: ```bash npm install webpack@4.23.1 -g ``` 接着安装 Webpack Dev Server,这...
Webpack是一个强大的模块打包工具,能将Vue组件预编译为浏览器可执行的JavaScript,并对所有模块进行合并打包。 首先,确保已经安装了Node.js环境。可以通过访问ftp路径`devoptsofts/nodejs/node-v6.9.0-x64.msi`...
本项目采用了一种组合技术栈,即前端使用`rmvc`(轻量级MVC框架)与`webpack`(模块打包工具),后端则利用`node.js`(JavaScript运行环境)进行开发。这种技术栈的选择旨在实现快速开发、高效部署以及灵活扩展。 ...
Webpack作为模块打包器,可以将Vue.js项目中的各种资源文件(如JS、CSS、图片等)进行打包和优化,以便于部署到生产环境。 最后,前端的单元测试和集成测试也是确保项目质量的重要环节。可以使用Jest或Mocha等测试...
为了处理React应用的模块打包和ES6+语法转换,项目可能使用Webpack作为模块打包工具,Babel作为转译器,将现代JavaScript语法转换为浏览器可识别的代码。 9. **CSS预处理器 - SCSS/SASS**: 项目可能使用SCSS或...
除此之外,项目可能还涉及到一些其他技术,例如使用Webpack进行模块打包,Babel将ES6+代码转换为浏览器兼容的JavaScript,以及使用 ESLint 进行代码质量检查和格式化。 总结来说,这个基于Node.js+Vue的聊天系统...
除此之外,项目可能还涉及其他技术,如Webpack用于模块打包,Babel用于ES6语法转换,确保代码在老旧浏览器中的兼容性。CSS预处理器如Sass或Less可能用于编写更易于维护的样式代码。Eslint和Prettier可能用于代码风格...
AVVW APICLOUD开发框架Apicloud + Vue2 + Vant2(有赞前端)+ Webpack4(Vue的-CLI3)打包,是一个采用Vue的数据绑定特性和Apicloud手机操控能力相结合的APP开发框架,此框架并非采用的Vue的SPA单页面应用方式,,...
开发者可能使用Webpack或其他打包工具将Vue源代码编译成浏览器可执行的静态资源。 最后,".gitignore"文件用于定义版本控制系统Git应忽略的文件类型,防止不必要的文件被提交。而"README.md"文件通常包含项目简介、...
然而,"基于浏览器的完全打包环境,没有 Nodejs 也照样打包前端项目.zip" 提供了一种创新的解决方案,它允许开发者在没有安装Node.js的情况下进行前端项目的打包。 这个项目的核心是Rollup,一个流行的JavaScript...
**构建工具** 在项目中起到自动化处理任务的作用,如编译、压缩、打包、测试等。常见的构建工具有Webpack、Gulp、Grunt等。在T-800中,可能会使用如Webpack这样的现代构建工具,它可以有效地管理项目依赖,优化资源...