This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

Introduction to VUE – Chapter 1

Vue is one of the mainstream front-end frameworks. Compared with other frameworks, it is easier to get started and get started, so it is more popular. (This series of introductory articles are only for self-study, recording some basic knowledge points)

1. The Node installation

Why do I need a Node project to run Vue? Quote a good response.

The main reason Vue works with Node is because

  1. Vue’s server-side rendering support for Node is by far the best (the reverse is not true). This is not to say that you can’t do server-side rendering except for Node. If you are good enough, you can run through the Vue JS logic using Go. As long as you can render strings, it theoretically doesn’t matter what language you use. But Node has js by nature, so Node is the most convenient.
  2. Node can do things that Vue can’t. Yes, the only thing that can’t be done in this part is the server logic, including data storage, data caching, user login authentication, etc..
  3. Unified language, both JavaScript

Website: Node official website

Download and install the appropriate development version

After the installation is complete, we use the win+R shortcut key to open and run

Enter CMD to open the command line tool

Enter node -v to view the installed node version (if the corresponding version number is displayed, the installation is successful).

2. NPM installation

  1. NPM is integrated into Node and is available once node is installed. s

You can view the local NPM version by using NPM -v. 2. Because the default address of NPM repository is foreign, it will be slow to install some dependent packages later, so it is recommended to install Taobao image CNPM

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

3. Scaffolding construction tool VUE-CLI installation

  1. Run commands on the command line

NPM install -g vue-cli then wait for the installation to complete.

  1. Check whether the installation is successful

vue -V

  1. Query the WebPack version

webpack -v

Note: If you are prompted “Webpack is not an internal or external command, nor is it a runnable program,” Need to reinstall the webpack package NPM install webpack -g or reset the environment variables My computer – (right-click) properties – Advanced System Settings – Environment variables Use the command line where node query the node installation path to copy the node installation path to the environment variable The path. Restart the cli tool to query the version.

Once the above steps are complete, the basic environment is ready. Next we use scaffolding vue-CLI to build the project.

4. Project construction

  1. First, select the directory where the project is stored, and then use the command line CD to go to that directory
  2. Enter the command line in this path

Vue init webpack demoTest A simple Project option appears when you press Enter: Project name: the name of the Project. If you don’t need to change it, press Enter. Note: do not use uppercase Project description: Project description, default is A vue.js Project, enter. Author: The Author. Install vue-router? Whether to install the routing plug-in of vUE. Y Use ESLint to lint your code? Whether to use ESLint to limit your code errors and styles. N setup unit tests with Karma + Mocha? Whether the unit testing tool Karma+Mocha needs to be installed. N Setup e2e tests with Nightwatch? Whether to install e2E to perform user behavior simulation tests. N

After waiting, the project is built.

At this point, you can open the project folder to see the directory generated by the project initialization.

  1. Run the project

npm run dev

A novice’s initialization vUE project is complete. The next chapter documents the project structure and development tools.