Développer un système backend basé sur la modularisation de vue - construire un projet

Cet article partage avec vous le développement modulaire du système backend basé sur vue. Les amis intéressés peuvent jeter un œil à cet article

Le répertoire des articles est le suivant :
Le développement modulaire du backend. basé sur le système vue - travail de préparation
Basé sur le système backend de développement modulaire vue - projet de construction

Avant-propos

Après s'être familiarisé avec les outils de préparation mentionnés dans le précédent article, commencez maintenant à créer votre propre projet. Il s'agit d'un projet VUE. Ensuite, utilisez vue-cli pour le construire

vue init webpack xxxx

Pendant le processus de construction, car comme mentionné précédemment, vous devez le faire. standardiser le code, donc en eslint Dans cette question, veuillez répondre Y. Une fois que tout est terminé, jetons un coup d'œil à la structure des répertoires

Structure des répertoires du projet

Bien sûr, quelques ajouts ont été apportés à ce répertoire, et des notes ont été made（加）, pas de notes

├── build                      // 构建相关  
├── config                     // 配置相关
├── dist                       // 打包之后相关
├── node_modules               // npm相关包
├── src                        // 代码
│   ├── api                    // 请求接口文件(加)
│   ├── assets                 // 静态资源(图片，样式等)
│   ├── components             // 全局公用组件
│   ├── directives             // 全局指令(加)
│   ├── mock                   // 项目mock 模拟数据(加)
│   ├── pages                  // 相关页面(加)
│   ├── router                 // 路由
│   ├── store                  // store管理(加)
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── .eslintignore              // eslint 忽略项
├── .eslintrc.js               // eslint 配置项
├── .postcssrc.js              // postcss 配置项
├── .gitignore                 // git 忽略项
├── index.html                 // html模板
└── package.json               // package.json

Analysez-les d'abord. Si vous ne voyez pas le dossier node_modules, ne vous en inquiétez pas pour l'instant. Ensuite, regardez en bas et ajoutez le api,directives,mock,pages,store. dossiers un par un, respectivement. Fonction

1. api : Interface de simulation de projet de stockage

2. directives : Instructions globales du projet de stockage

3. simulation :stocker les données simulées à l'aide de mock.js

4. pages : pages liées au projet de magasin

5. magasin : Gestion de l'état de stockage

Après avoir lu ceux-ci, il y a en fait, rien d'intéressant à voir. Ceux-ci peuvent être nommés comme vous le souhaitez. Parlons ensuite de package.json

package.json

C'est le fichier utilisé par NPM pour gérer les packages de projet.
Ouvrez ce fichier et recherchez l'attribut devDependencies, où nous ajoutons les packages nécessaires au projet, par exemple :

1. "axios": "^0.17.0", //Outil de requête

2. "js-cookie": "^2.2.0",//cookie

3. "lodash": "^ 4.17 .4",//Bibliothèque de fonctions

4. "mockjs": "^1.0.0",//Outil de données de simulation

5. " vuex " : "^3.0.1",//Outil de gestion de statut

6. "vee-validate": "^2.0.0"//Outil de validation de formulaire

Si votre fichier a été configuré, alors entrez directement la commande suivante

npm install --save-dev

Lorsque vous entrez comme ceci, vous constaterez que le téléchargement est très, très lent. Pourquoi ? Parce que le package que vous avez téléchargé peut provenir de l'étranger, donc~~ nous ajoutons 淘宝镜像, comme suit

npm install --save-dev --registry=http://registry.npm.taobao.org

Bien sûr, si vous les ajoutez un par un, je vérifie généralement d'abord la version du package . Parce que parfois certains packages sont des versions bêta, la commande est la suivante :

npm show 包名或者插件名称 versions --json

Entrez ensuite la commande suivante :

npm install 包名或者插件名称@版本 --save-dev --registry=http://registry.npm.taobao.org

À ce moment-là, nous avons juste besoin de boire une tasse de. thé et fais-le tranquillement Juste un bel homme ou une belle fille~~ Une fois le téléchargement terminé, vous pouvez voir le dossier node_modules

Modification personnelle, pour référence seulement

Complétez ce qui précède. Après ces étapes, vous devez encore modifier la configuration.

Modifier le port

Recherchez d'abord le répertoire config, puis recherchez le fichier index.js, ouvrez l'élément de configuration trouvé dans dev, car le port par défaut est 8080, afin d'éviter les conflits de port avec d'autres projets, recherchez l'option port et remplacez-la par votre port préféré

Après l'exécution, le navigateur ouvrira automatiquement le projet

Trouvez l'élément de configuration dev comme ci-dessus, puis recherchez autoOpenBrowser La valeur par défaut est false, remplacez-la maintenant par true.

Problèmes de chargement des ressources après l'emballage

En raison du problème selon lequel les images et les styles n'apparaissent pas après l'emballage, je ne sais pas si vous avez le même problème, donc J'ai effectué les modifications suivantes :

configRecherchez le fichier index.js dans le répertoire, ouvrez l'élément de configuration trouvé dans build, ajoutez assetsPublicPath: './'

puis recherchez le fichier build dans le répertoire utils.js , puis recherchez le code suivant :

return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
  })

Ajouter publicPath: '../../'

dans l'élément de configuration Résumé

Cette partie est à titre de référence seulement, si vous pouvez l'ignorer pour le moment. Si le même problème se produit, vous pouvez revenir et la regarder. Cela n'entravera pas la construction du projet. Une fois la construction terminée, commençons à coder !

Article
Développement d'un système backend basé sur la modularisation vue - travail de préparation
Développement d'un système backend basé sur la modularisation vue - construction d'un projet

Recommandations associées :

À quoi devons-nous prêter attention dans le cross-domaine et le rendu de vue2.0 axios

Comment implémenter la barre de navigation Vue de glissement et de rebond inertiel sur le côté mobile

Comment gérer l'actualisation 404 une fois le projet vue emballé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!