By yugasun from yugasun.com/post/you-ma… This article can be reproduced in full, but the original author and source need to be retained.

With the foundation of the previous articles, I believe it makes sense to step back and look at the project initialized with the VUe-CLI scaffolding tool. This article will give you a thorough look at initializing your project with vue-CLI scaffolding tools and show you how to customize your own project templates.

Initialize the project

Install vuE-CLI scaffolding tool globally first:

npm install -g vue-cli
Copy the code

After the installation is complete, initialize the WebPack-based project template and follow the instructions to fill in the project information and select the required modules:

$ vue init webpack vue-pro-demo ? Project name vue-pro-demo ? Project description A Vue.js project ? Author yugasun <[email protected]> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ?  Pick an ESLint preset Airbnb ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install`for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue-pro-demo".


# Installing project dependencies ...
# = = = = = = = = = = = = = = = = = = = = = = = =.# Project initialization finished!
# = = = = = = = = = = = = = = = = = = = = = = = =

To get started:

  cd vue-pro-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack
Copy the code

After the command is executed, a project folder named vue-pro-demo will be generated in the current directory. The structure is as follows:

. ├ ─ ─ the README. Md# Project description document├ ─ ─ the buildSave the WebPack build file├ ─ ─ the configSave the WebPack configuration file├ ─ ─ index. HTML# project HTML template file├ ─ ─ package. JsonStore project package dependencies and project configuration information├ ─ ─ the SRC# Development folder, general business code is written here└ ─ ─ the staticProject static resources folder

4 directories, 4 files
Copy the code

For the SRC directory, we will also split the folder according to the function of the file in the development. For example, my favorite structure is as follows (for reference only) :

. ├ ─ ─ App. VueHow does the project component├ ─ ─ API# Store interface related files├ ─ ─ assetsStore project resource files, such as images├ ─ ─ the componentsStore common components├ ─ ─ directive# store global custom instruction├ ─ ─ filters# store global filters├ ─ ─ the main js# project entry file├ ─ ─ the mock# the mock data├ ─ ─ the router# routing├ ─ ─ store# State management├ ─ ─ styles# style file├ ─ ─ utils# store utility functions└ ─ ─ viewsStore the viewclass component
Copy the code

Standard directory structure can be very good to standardize your development habits, code division is clear, easy to maintain, when you throw the pot to others, others will not be too uncomfortable, this experience I think we all know, should not say too much curse words.

Customize development project templates

Everyone who develops a project using the official project template will more or less modify some of the default WebPack configuration, then add some of the plugins that the project will use most often, and also add some generic folder directories in the SRC directory, as described above.

The problem is that every time we initialize a project, we have to do the same thing over and over again. How can a terminally lazy programmer tolerate that? So there is a need for customization.

Here’s how to redevelop the official WebPack template.

Secondary development

To do this, there are only three steps:

  1. Vuejs-templates /webpack
  2. Clone to local secondary development, add your desired configuration and plug-ins, and push to Github
  3. When initializing the project, use our own repository

For step 1, anyone who knows how to use Github should be fine, but I hope you don’t ask me why copying a project is called fork-fork, let alone f** K. Just do a quick search.

Next, I will focus on Step 2.

After cloning the project vuejs-templates/webpack into our local directory, you’ll find the directory structure looks like this:

.├ ── LICENSE ├─ deploy-docs. Sh ├─ docs ├─ meta. Js ├─ Package-Lock. json ├─ Package ├ ─ ─ the template └ ─ ─ utilsCopy the code

Here we only need to worry about the template directory, because that is where our project template is stored.

Open the template/ SRC /main.js file (the project entry file) as follows:

@@#if_eq build "standalone"@@ // The Vue build version to load with the `import` command // (runtime-only or standalone)  has been set in webpack.base.conf with an alias. @@/if_eq@@ import Vue from 'vue' import App from './App' @@#router@@ import router from './router' @@/router@@ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', @@#router@@ router, @@/router@@ @@#if_eq build "runtime"@@ render: h => h(App) @@/if_eq@@ @@#if_eq build "standalone"@@ components: { App }, template: '<App/>' @@/if_eq@@ })Copy the code

Because Hexo had problems compiling the demo code with handlebars syntax, the curly braces were modified {-> @,} -> @. Please read the actual source code.

It contains a lot of handlebars syntax, mostly if conditional syntax, and is easy to understand.

Ok, now add a vue-Axios-plugin module as follows:

  1. intemplate/package.json 的 dependenciesAdd to fieldvue-axios-pluginRely on:
/ /... "Dependencies" : {" vue - axios - plugin ":" @ 1.2.3 ", "vue" : "@ 2.5.2 @ # @ the router @ @", "vue - the router" : "@ 3.0.1" @ @ / router @ @}, / /...Copy the code

Router @@#router@@ is used to determine whether you want to use vue-router during initialization. If not, vue-Router dependency will be removed based on your judgment. But note that the comma (,) at the end of “vue”: “@2.5.2” is also removed, so when you add custom dependencies, make sure that your project’s package.json file format is valid after initialization when this happens.

  1. intemplate/src/main.jsAdd plug-in injection code to:
@@#if_eq build "standalone"@@ // The Vue build version to load with the `import` command // (runtime-only or standalone)  has been set in webpack.base.conf with an alias. @@/if_eq@@ import Vue from 'vue' import VueAxiosPlugin from 'vue-axios-plugin' import App from './App' @@#router@@ import router from './router' @@/router@@ Vue.use(VueAxiosPlugin)  Vue.config.productionTip = false // ...Copy the code

Local test use

Ok, now that our custom component is added, we need to test the modified template before committing, and run the following command to initialize it:

vue init path/to/webpack-template my-project
Copy the code

The first parameter to vue init is path/to/webpack-template. After that, repeat the interactive configuration process and run your project.

Not surprisingly, your project will have a great NPM run dev, after which we just need to push it to our own Github repository.

use

Once submitted, the template can be shared by project colleagues by simply running the following command:

vue init yugasun/webpack my-project
Copy the code

The yugasun/webpack parameter tells vuE-CLI to download the WebPack project template from user Yugasun’s Github repository during initialization.

Then you can happily write and output your Hello World.

added

Once you’re familiar enough with the project template, you can also customize the WebPack configuration more personally, or add interactive commands to vue init. For those interested, see my personal template Yugasun/Webpack.

conclusion

This concludes chapter 2 on project configuration. Hopefully, this chapter will help you understand how a complete front-end project structure is implemented. From the most basic label introduction to the engineering project architecture, I try to do the most stupid way to explain, is to hope that even a front-end novice, can easily achieve their own engineering project configuration. The key is to practice and summarize more.

The source code in this

Project directory

You-May-Not-Know-Vuejs