Using scaffolding, create a Vue 2.x project from scratch

prepare

  • We assume that you already have javascript + HTML + CSS development experience. If you are pure white see The ECMAScript6 Primer
  • Some familiarity with Webpack and Vue-Loader is assumed. See Webpack Demo if you are not familiar with it
  • Node.js 8.0 or later is installed on your computer. If node is not installed on your computer or the node version is too early, please refer to the official website of Node.js

Began to practice

npm install -g vue-cli
Copy the code
vue init webpack project-test
Copy the code
cd project-test
Copy the code
npm install
Copy the code
npm run dev
Copy the code

Vue2. X project structure

├ ─ ─ the build /# webPack configuration file│ └ ─ ─... ├─ config/ │ ├─ index.js# Major project configuration
│   └── ...
├── src/
│   ├── main.js                 # Application entry file│ ├ ─ ─ App. VueMain application component│ ├ ─ ─ the components /# page component│ │ └ ─ ─... │ └ ─ ─ assets /Module resources (handled by Webpack)│ └ ─ ─... ├ ─ ─ the static /# pure static resource (direct copy)├ ─ ─test/ │ └ ─ ─ unit /# Unit tests│ │ ├ ─ ─ specs /# Test the spec file│ │ ├ ─ ─ index. Js# Test the build item file│ │ └ ─ ─ karma. Conf. Js# Test the runner profile│ └ ─ ─ e2e /# e2e test│ │ ├ ─ ─ specs /# Test the spec file│ │ ├ ─ ─ the custom assertions /# e2e Custom assertions for testing│ │ ├ ─ ─ runner. Js# Test the running script│ │ └ ─ ─ nightwatch. Conf. Js# Test the runner profile├ ─ ─ babelrc# Babel configuration├ ─ ─. Postcssrc. Js# postcss configuration├ ─ ─. Eslintrc. Js# eslint configuration├ ─ ─ editorconfig# editor configuration├ ─ ─ index. HTML# index. HTML templates└ ─ ─ package. JsonBuild scripts and dependencies
Copy the code
The project structure drawing was transferred from Ze FengCopy the code

Introduction to Development Tools

  • Text editor using vscode,vscode rich plug-in library can meet most of the use requirements.
  • The command line tool uses the combination of Iterm2 + oh-my-zsh. People who have used it say yes.
  • Interface test uses Postman.
  • You are advised to use Chrome to debug the browser.

At the end

The specific knowledge points of VUe2. X will be introduced in detail in the following blog posts. I won’t repeat it here. Everyone has their own preferences about developing tools. If you guys have good opinions and suggestions, please leave a comment.

trailer

The next blog post will cover formatting standards for code development. ESLint, the beloved/hated version of ESLint, stay tuned. project