4.vue-cli 2 + webpack搭建Vue开发环境

建议使用 vue-cli 3 以上脚手架进行搭建，本文版本比较低了。谢谢

①搭建Vue开发环境，必须使用到node.js+npm环境

    进入node.js官网下载.msi后缀的即可。下载完成后。和普通Windows软件一样，下一步，下一步安装即可。

     安装完成后，Win+R打开运行，输入cmd进入命令行。

     使用node -v即可查看node.js的版本   

     npm会随着node.js一并安装好。使用npm -v即可查看npm的版本

     如果node.js版本和npm版本号都能够正常显示。则说明：node.js和npm已经安装完成

② npm作为包管理器来说相对来说比较好用，但是由于服务器不在国内所以有的时候速度会慢一点。如果要想解决这一问题，可以使用淘宝npm在国内的镜像。即cnpm。

    在cmd命令行下，运行如下命令，即可安装淘宝cnpm镜像

    命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

③搭建Vue的开发环境，需要安装Vue的脚手架工具（官方命令行工具）

    命令：npm install -g vue-cli  或者   cnpm install -g vue-cli  （此命令只需要执行一次即可） 

    ----如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装

 

④接下来就可以创建Vue项目了。

    1.如果你想在E：盘下创建一个vue-demo01项目，则必须通过命令行，cd到对应的一个项目里面

    2.使用命令 vue init webpack vue-demo01(vue-demo01为项目名称)

       或者vue init webpack-simple vuedemo01(推荐使用webpack-simple创建！！！)

    3.cd vue-demo01(进入到刚创建的vue-demo01项目文件夹下)

    4.npm install   /   cnpm install（如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行。不报错执行也没问题。）

    5.npm run dev(即可启动项目)

 

 

 ⑤ 至此，出现如下页面，则证明项目已经启动完成

⑥为什么推荐使用vue init webpack-simple vue-demo01 ？？？有时间研究一下再做补充

附：Vue篇目录：

    1.Vue组件之间传值问题                              2.v-model 用在组件中

    3.Vue.js 实战 调查问卷WebApp项目          4.vue-cli + webpack搭建Vue开发环境

    5. Vue简单问题汇总(持续更新...)                 6.Vue组件之间数据通信之Bus总线

    7.Vue-Router导航钩子(附Demo实例)         8.ES6箭头函数与普通函数的区别  

    9.Vuex的使用                                             10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数

   11.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题

   12.Vuex命名空间namespaced                   13.Vue axios的使用      

---

---->如有疑问，请发表评论，或者联系博主：lzb348110175@163.com，欢迎哦^_^