vue和webpack项目构建过程常用的npm命令详解

更新时间：2018年06月15日 11:31:40 作者：github_39274378

本文通过实例代码给大家介绍了vue和webpack项目构建过程常用的npm命令,需要的朋友可以参考下

vue

 //最新稳定版
cnpm install vue
 //全局安装 vue-cli
 cnpm install --global vue-cli
 //创建一个基于 webpack 模板的新项目
vue init webpack my-project
 //进入项目目录，运行
cd my-project
 cnpm install
 cnpm run dev

webpack

 //全局安装webpack
 cnpm install -g webpack
 //安装到你的项目目录
cnpm install --save-dev webpack
 //初始化package.json
 cnpm init
 //使用webpack构建本地服务器
cnpm install --save-dev webpack-dev-server
 //运行本地服务器
npm run server
 // npm一次性安装多个依赖模块，模块之间用空格隔开
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
 //css-loader 和 style-loader
 cnpm install --save-dev style-loader css-loader
 //安装less-loader和less： 
cnpm install less less-loader --save-dev
 //postcss-loader 和 autoprefixer（自动添加前缀的插件）
cnpm install --save-dev postcss-loader autoprefixer
 //自动根据模版生成html插件
cnpm install --save-dev html-webpack-plugin
 //分离CSS和JS文件
cnpm install --save-dev extract-text-webpack-plugin

--save和--save-dev的区别

相同点：都是写入到package.json中

不同点：1使用 --save-dev 安装的插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，则被写入到 dependencies 对象里面去。

2devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

总结

以上所述是小编给大家介绍的vue和webpack项目构建过程常用的npm命令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Vue 使用typescript如何优雅的调用swagger API
这篇文章主要介绍了Vue 使用typescript如何优雅的调用swagger API,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
vue中使用/deep/失效的解决方法
这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器，则可以使用/deep/，如果/deep/ 无效，则使用 ::v-deep，本文给大家讲解的非常详细需要的朋友可以参考下
2022-11-11
vue实现网易云音乐纯界面
这篇文章主要为大家介绍了vue实现网易云音乐纯界面过程详解，附含详细源码，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue .sync修饰符的使用详解
这篇文章主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
Vue实现读取本地图片的示例代码
这篇文章主要为大家详细介绍了如何利用Vue实现读取本地图片的功能，文中的示例代码讲解详细，具有一定的参考价值，需要的小伙伴可以学习一下
2023-07-07
vue中view-model双向绑定基础原理解析
这篇文章主要介绍了vue中view-model双向绑定基础原理，文中给大家介绍了vue双向绑定的原理总结，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-10-10
使用Vue3+ElementPlus前端实现分片上传的全过程
ElementPlus是一套为开发者、设计师和产品经理准备的基于Vue 3.0的组件库,提供了配套设计资源,帮助你的网站快速成型,下面这篇文章主要给大家介绍了关于使用Vue3+ElementPlus前端实现分片上传的相关资料,需要的朋友可以参考下
2022-11-11
Vue引入echarts方法与使用介绍
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue3中watch的用法与最佳实践指南
这篇文章主要给大家介绍了关于Vue3中watch用法与最佳实践的相关资料,watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法,可以通过watch动态改变关联的状态,需要的朋友可以参考下
2021-07-07
Vue子组件调用父组件方法案例详解
这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09