A. Vue – cli

  • Vue-cli is an official scaffolding tool provided by Vue, cli: Command line interface
  • The latest version is 4
  • The 3.X and 4.X versions do not change much, but the 3.X relative to 2.X version changes significantly
  • Online documentation: cli.vuejs.org/zh/

Create a Vue project

2.1 Create scaffold 3/4 Vue project and run it

  • Step 1: Install vUE scaffolding
NPM install -g@vue /cli # OR yarn global add @vue/cliCopy the code
  • Test whether the scaffold is installed successfully: the scaffold is installed successfully when you enter the following command to see the scaffold version number
    • Vue –version Indicates the VUE – CLI version, not the Vue version
  • Step 2: Create a VUE project
//2.Vue-cli create a hello-world project Vue create hello-worldCopy the code
  • Step 3: Run the project
//3. Run Vue project NPM run serveCopy the code

2.2 Create scaffold 2 Vue project and run it

  • 1. Install vuE-CLI scaffolding
NPM install -g@vue /cli-initCopy the code
  • 2.Vue-cli create a my-project project
//2.Vue-cli create a my-project Vue init webpack my-projectCopy the code
  • 3. Run the Vue project
//3. Run Vue project NPM run devCopy the code

Vue-cli2 and VUe-cli3/4 directories and corresponding functions

Using vuE-CLI to build a VUE project, a series of files will be automatically generated, and the specific structure of these files, the corresponding function of the file can be seen below:

3.1 VuE-CLI3/4 Directory and corresponding functions

  • Public stores static files
  • Public /index.html generates entry files for the project, webpack-packed JS, and CSS are automatically injected into the page
  • SRC The place where various VUE files are stored
  • SRC /assets are used to store static files, such as images and CSS
  • SRC/Compnents is used to hold our common components
  • SRC /views is used to store the various pages we have written
  • SRC/app.vue The main vue component introduces other components. App.vue is the main component of the project, and all pages are switched under app.vue
  • SRC /main.js entry file, used to initialize vue instances, can also reference component libraries or global variables in this file
  • The SRC /router.js routing file is the address path for each page
  • SRC /store.js status file
  • Package. json module basic information, required module for project development, version, and project name
1. ├ ─ ─ the README. Md 2. ├ ─ ─ index. 3. HTML ├ ─ ─ package. The json 4. ├ ─ ─ the SRC 5. │ ├ ─ ─ App. Vue 6. │ ├ ─ ─ assets 7. │ │ ├ ─ ─ img 8. │ │ └ ─ ─ logo. PNG 9. │ ├ ─ ─ components 10. │ │ └ ─ ─ the Helloworld. Vue 11. │ ├ ─ ─ views 12. │ │ └ ─ ─ Home. Vue 13. │ ├ ─ ─ the main, js 14. │ ├ ─ ─ the router routing configuration file / / 15. │ │ └ ─ ─ the router. The js 16. │ └ ─ ─ store 17. │ └ ─ ─ store. Js 18. └ ─ ─ Babel. Config. Js 19. └ ─ ─ package.jsonCopy the code

3.2 VuE-CLI2 Directory and corresponding functions

├─ ├─ ├─ ├─ ├─ ├─ ├─ Build / # webPack ├ ─ ─ the config / │ ├ ─ ─ index. The js # project core configuration │ └ ─ ─... ├ ─ ─ node_module of dependent modules installed in the / # project ─ ─ SRC / │ ├ ─ ─ the main, js # program entry documents │ ├ ─ ─ App. # vue program entrance vue component │ ├ ─ ─ the components / # component │ │ └ ─ ─ . │ ├ ─ └─ assets/ # ├ ─ ├ ─ 088 ├ ─ ─ the static / # pure static resources (copy directly into the dist/static /) ├ ─ ─ the test / │ └ ─ ─ unit / # unit test │ │ ├ ─ ─ specs / # test specification │ │ ├ ─ ─ index. The js file │ # test entry │ ├─ ├─ ├─ all assertions, all assertions, all assertions, all assertions, all assertions, all assertions, all assertions Runner. Js # to run the test script │ │ └ ─ ─ nightwatch. Conf. # js to run the test configuration file ├ ─ ─ the babelrc # Babel configuration file ├ ─ ─ the editorconfig # edit configuration files ├ ─ ─ ├─ └─ package.json # ├─ ├─ ├─ └─ package.json # ├ ─ garbage, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercisesCopy the code

4. Configure Taobao mirroring

The entire process is based on installing Node.js and CNPM. How to install Node.js is not covered here. How to install CNPM globally, here briefly mentioned :(taobao image command)

npm install cnpm -g --registry=https://registry.npm.taobao.org
Copy the code