vue项目实战总结篇

2020-06-16 05:47:32易采站长站整理

这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文。

这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署。

废话不多说了。干货直接上。

一、 必须node环境, 这次就不写node环境的安装了。过两天我会写个node环境的安装随笔。

二、 node环境配好后。开整vue。

1. 安装vue脚手架。


 npm install -g vue-cli

2. 用脚手架搭项目(只是一行命令) 


 vue init webpack-simple (项目名字)

  或 


 vue init webpack (项目名字)

  二者区别(个人理解):

    vue init webpack-simple :可以理解为轻巧的,没有多余的配置和包,但能保证项目正常运行。

    vue init webpack : 可以理解为完整的,包含比较多配置和包。

3. 本次选用 vue init webpack 完整版的。

  (1) 执行完vue init webpack,会遇见以下选项。

 完成上述选(按需选择),等把所需依赖下载完后。

 (2) 进入刚建的项目里,执行npm install

  eg: PS E:vueTestvueTest2> npm run dev

  当 出现下面的话,就证明你的vue项目已经搭好了。

 

 (3) 打开浏览器,访问http://localhost:8080,

    当出现下面这个页面,说明vue项目正常运行了。框架已搭好。

  

  (4) 骨架已搭好,现在给她血与肉,让她不在骨感。

    这次我们用 axios 进行向服务器请求

          vuex 来管理我们的前端数据。

  我们需要首先安装这两个依赖包,按套路走 : npm install axios vuex –save

    在此我做个补充,安装依赖包时,会使用到 –save-dev 或 –save

    安装的依赖包会在项目中这个文件package.json中展示

    –save: 上线后,要用到的。(执行后,会对应下图中dependencies)

    –save-de: 开发时,要用到的包.(执行后,会对应下图中devDependencies)   

  

  此处,我也有个问题: 安装的依赖包,是放到dependencies 中,还是devDependencies中?