vue2 项目开发详解-搭建健壮的项目环境

最新推荐文章于 2024-07-25 00:53:38 发布

res_min

最新推荐文章于 2024-07-25 00:53:38 发布

阅读量601

点赞数 1

分类专栏：个人笔记文章标签：开发人员管理技术插件 github

本文链接：https://blog.csdn.net/res_min/article/details/72724014

版权

个人笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

对于脚手架而言，相信大家都有自己熟悉的一套方法，在这里博主推荐大家看下yeoman
对于大多数中级开发者以及初级开发者在github 以及npm 都可以快速的学习一些先进的开发技术，不论是项目环境搭建，插件配置说明，跨域问题解决，路由以及状态管理方案等。都可以在上面看到大神级讲解以及具体实现。

接下来开始我们的主题讲解了。

本项目是基于vue官网推荐的脚手架工具vue-cli 实现的。

安装：

安装 node 安装稳定版的哦，官网左侧的，下载下来直接运行 node中自带npm 包管理工具，会nvm的同学最好。。。。懂得��

npm install -g vue-cli

老版本的node可同过nvm自己升级，当然升级你的npm也是必不可少的

npm i -g npm

vue-cli

vue-cli 提供了五种脚手架可供选择；感兴趣的小伙伴可以去看看。
本项目的搭建是在webpack-simple基础上改造的。

好了到这我就当大家安装了全局的vue-cli 用行

vue init webpack-simple vueproject

在命令行运行上述代码效果如下：

效果图

看下我们生成的文件

效果图

因为国内网的原因我们用cnpm 安装依赖；

cnpm的安装方法：

npm install -g cnpm

在命令行运行：

cnpm install

至此我们可以运行这个项目了

npm run dev

相信打家都会在浏览器看到如下效果：

效果图

打开我们的src文件夹：

效果图

相信很多初学者以及对模块化理解略懂的小伙伴看到这样的文件心头是一千头草泥马呼啸而过。

在实际的项目开发中项目的层次级作为开发人员来说很中要，项目树越详细我们的开发结构就越详细维护以及调试或者项目交接也很容易让对方理清业务逻辑。

.
|____App.vue               # app最外层容器
|____main.js               # app入口文件，build 时将打包为 /dist/build.js
|____pages                 # 页面布局类容器 (layouts)
| |____Homepage            /* 注: 布局类组件用于定义单个“页面”的主体样式，不应包含业务逻辑*/
| |____Personal            /*由于本项目为SPA，“页面”实质上只能看做app最外层容器的次级容器 */
| |____...
|____components            # 所有组件
| |____FlashList           /*组件content*/
| |____FooterBar           /*组件footer*/
| |____HeaderBar           /*组件header*/      
| |____...
|____vuex                       # vuex层，由多个state,mutations和actions构成
| |____store.js                 # 整个 SPA 的 全局store，有所有页面的 vuexer 组合而成
| |____personal-vuexer.js       
| |____...
| |____axios-mock.js           #使用 mockData 目录下的假数据拦截处理axios请求(仅dev模式下有效，不会build进生产环境)
|____mockData                 # 开发模式使用的所有 “假接口” 数据
| |____feed-messages.js       # 某个接口的数据返回(根据实际需求构造，与实际 api 的数据结构一致)
| |____humming-flash.js
| |____...

这样看项目结构就比较有层次结构了

附：

效果图

对于components组件内容

效果图

对应的图标以及图片放在对应的组件中这样方便我们管理

应为在项目中允许使用sass 所以在项目中我们可以愉快的使用sass预编译；

应为这个项目是私有项目具体代码不予转出；但是再次我将上述设计的有关依赖发下供大家使用：
注：新的webpack只是增加了一些项目依赖具体看下配置文件就好将我的配置文件加进去重新

npm install

{
  "name": "vuejs",
  "description": "fengniao_neican_v1.0",
  "version": "1.0.0",
  "author": "parks <npupyz@126.com>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --port 1356 --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "axios": "^0.16.1",
    "socket.io-client": "^1.7.4",
    "vue": "^2.2.1",
    "vue-resource": "^1.3.1",
    "vue-router": "^2.4.0",
    "vuex": "^2.3.0"
  },
  "devDependencies": {
    "axios-mock-adapter": "^1.8.1",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-inline-environment-variables": "0.0.2",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

看了上述的描述相信大家心里都有自己的想法了相应的api以及依赖调用我截个图大家看下
这里写图片描述

这是main.js中的相关配置下载的依赖都在node_modules中我们使用的时候之间像上述那样调用相关的API调用也是这样的方式具体的API使用查看官方文档案例在GitHub上也很多大家可以上去看下相应的API的源码及相关使用说明再次项目的搭建以及文件分配已经完成具体的内容添加大家可以根据自己的业务逻辑往里面添加谢谢

随手顶一个—— 本人博客