脚本宝典收集整理的这篇文章主要介绍了

webpack+Vue2.0项目基础工程文件配置

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

随着Vue的流行,很多公司开始技术栈指向Vue,开始的时候用gulp+vue1.0做项目,一直到现在,webpack趋势也上来了,而且vue官网也是用webpack跟Vue结合去讲解实例,接下来大概说下环境配置的步骤:

1.安装node.js

安装nodejs

win系统

去nodejs官网下载即可,地址:http://nodejs.cn/ 个人使用的6.11.3,因为公司服务器是这个,看自己爱好了,不过提示大家,不是最新版本就是最好的。

mac

用brew安装就好,看个人爱好,也可以下载软件包安装。

安装了后,集成了npm包管理器,很爽的。

2.安装webpack

npm install webpack -g

3.安装Vue相关

首先,全局安装vue

npm install -g vue

其次,安装脚手架

npm install vue-cli -g

开发过程中肯定使用异步请求,路由等,想要什么直接命令安装就好,如下:

npm install vue-router axios –-save-dev

多个模块空格隔开就好。

4.开始构建webpack+vue的基础构建文件

cd到你打算放置的项目目录
然后执行命令:

vue init webpack projectName

会有一些初始化的设置,根据你的情况对应输入即可:

Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理) 
Project name (vue-test) 你的项目名称,这里可以直接回车 
Project description (A Vue.js project) 描述可以随便写,或者直接回车 
Author 你的名字或者直接回车默认 
Use ESLint to lint your code? Y 
setup unit tests with karma + mocha?n(单元测试不需要) 
setup e2e tests with Nightwatch?n(单元测试不需要)

5.开始配置

cd 刚刚创建的项目名称
执行命令:

npm install

开始安装package.json的依赖。
安装完毕,会有提示就可以使用了。

6.启动环境

开发环境:

npm run dev

生产代码:

npm run build

执行了后会有个dist文件夹,里面有index.html跟static文件夹。

以上就是webpack+vue环境搭建,搭建完毕后,如果有必要搭建自己的模拟数据服务,可以去之前写的文章:https://segmentfault.com/a/11...

总结

以上是脚本宝典为你收集整理的

webpack+Vue2.0项目基础工程文件配置

全部内容,希望文章能够帮你解决

webpack+Vue2.0项目基础工程文件配置

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过