webpack+vue搭建环境到发布

webpack+vue搭建环境到发布

一、环境搭建

1.1、去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html )

注意node的版本，只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

下载安装包之后直接点击安装即可。

1.2、利用npm安装webpack 命令行语句为npm install webpack -g 。

1.3、下面就是安装淘宝镜像，如下图：

npm install -g cnpm --registry=https://registry

使用的时候就是cnpm下载

1.4、接下来就是全局安装vue-cli。需要注意的是使用npm安装vue-cli的时候时间很久，可能会超过两个小时

安装语句为：npm install --global vue-cli

1.5、创建一个基于webpack模板的新项目

命令行语句为vue init webpack my-project (其中my-project为文件名称,并且文件名只能是小写字母)。在创建模板新项目的时候需要进入到指定的文件夹下面去。

在cmd里输入vue init webpack my-project (项目文件夹名)，回车后，等待一小会儿，依次出现‘git’下的项，可按下图操作

可以看见文件夹多了许多文件

5.安装依赖

在cmd里 1).输入：cd my-project（项目名），回车，进入到具体项目文件夹

2).输入：cnpm install，回车，等待一小会儿

回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）

基于脚手架创建的默认项目结构如下图所示：

7.测试环境是否搭建成功

方法1：在cmd里输入：cnpm run dev

（显然每次修改代码，每次去cmd输入命令是个很繁琐的过程，所以在webstorm中调出npm菜单。

在package.json文件上点击右键—〉点击show npm scripts 即可调出菜单，以后运行只需在npm菜单里双击dev.

注意在命令行运行项目和dev运行项目不可一起进行，进行一个时需将另一个关闭，否则会报端口已被占用的错误。

）

可以访问我的博客：http://blog.csdn.net/zhangjing1019/article/details/79540448

我把俩个源码放在我得github上了 这是俩个git仓库地址

https://github.com/zhjing1019/webpack-vue.git

https://github.com/zhjing1019/webpack-vue2.0-iview-.git