从无到有移动端vue项目构建 Vue2+VueRouter2+webpack+vuex+vux+es6 构建项目实战（-）

         之前一个人写过一整套vue后台管理系统，是PC端的，最近因为公司需求需要写一套移动端vue项目，所以记录一下构建过程。有不对的欢迎指出！！

---

　　　从无到有构建，本文章针对widows系统。　

准备工作：

　　1.安装 node 装完node自动就有npm 了 node 官方网址  https://nodejs.org/zh-cn/  建议下载稳定版，下载最新版可能出现未知错误

　　安装好nodejs 之后，在终端下面输入命令 node -v 会有版本号出来。就说明安装成功了。输入 npm -v 也会有版本号出来，就说明，npm也已经安装好了。

　　2.编译器  随便你，什么都行   

　　3.装一个要淘宝镜像，有的时候网络不好npm 会一直报错，坑死人，所以下载的时候用cnpm 但是有可能会出现丢包的情况   

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

vue-cil构建项目

1.vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。

我们首先，需要安装vue-cil。命令如下：

$ cnpm install -g vue-cli

上面代码中的 $ 为终端前缀，不是让你输入的。下面涉及到终端的部分均是如此，不再累述。

2.

$ vue init webpack vuedemo      点击回车  创建一个基于"webpack"的项目,webpack后面是文件夹名字

name是项目名字

输入这个命令之后，会出现一些提示，可以看一下都是什么，如果不想看一直回车就好

具体会出现的提示如下：

 

 

 

 

一直回车就好，ESLint 建议不要选y，选n，因为开了这个有的时候写的不规范就会报错，搞死人。如果你功力深厚就选吧，其他几项选中都没事

 

当你一路回车，看到这个的时候，说明简单的vue-cli项目已经构建好了。 

这里有一个小事提一下，name 起的名字是项目名字，会出现在titile里  vue init webpack vuedemo   webpack后面是创建的文件夹名字

 

 

这步完成之后你会发现电脑多了一个文件夹，vuedemo

打开文件夹就是目录

 

接下来解释一下文件夹里都是什么东西

---

 

 

回到node，看看上面的代码

cd  vuedemo  打开你的项目      npm run dev 让你的项目运行起来

 

 

cd  vuedemo  打开你的项目     

 

 

 看到上面有目录的名字，说明已经成功打开了。

然后 npm run dev 让你的项目运行起来

 

 

当你看到localhost:xxxx 的时候说明你的项目成功的跑起来了，现在注意几个事
项目跑起来的时候浏览器会打开一个页面，如果你的浏览器没有打开页面，看看电脑的端口有没有被占，如果你电脑这个端口8080已经有项目在使用了，就要去改一下端口，如果你的端口没有被占检查一下，是不是自动打开浏览器这个没有选true   autoOpenBrowser：true

 

改完之后的样子如下

然后回到node，再npm run dev ,出现vue的大图标即为成功了~~~

后续还有很多，因为一篇文章太长了，所以后续的再接着写~~~