In addition to ES6 syntax and Webpack configuration make you feel strange, the important thing is the change of ideas. Before using JQ to arbitrarily take global variables and modify dom hammer can not be used, vUE only cares about the data itself, no longer need to frequent and tedious dom operation. Register event, Listen event, cancel event… (Really annoying). The official documentation of VUE is good, from shallow to deep. It is really cool if you do not use the construction tool, but it is impossible in the actual project application. When using VUE-CLI to build a project, it is found that the official documentation is not enough, so you need to master ES6. Vue buckets (vuE-CLI, vue-Router, vuE-Resource,vuex) are still available.

Article reprinted: Le Byte

Vue. js has a famous family bucket series, including vue-Router, Vuex, vue-resource, and vue-CLI, which is the core of a complete VUE project.

Vue-cli this build tool greatly reduces the difficulty of using Webpack, supports hot update, has webpack-dev-server support, is similar to start a request server, give you build a test environment, just focus on development OK.

1. Install vue-CLI. (1) Use NPM (node environment needs to be installed) to install webPack globally. NPM install webpack -g or (NPM install -g webpack). After the installation is complete, enter webpack -v as shown in the following figure. If the corresponding version number is displayed, the installation is successful.

② To install vuE-CLI globally, enter CMD:

NPM install –global vue — cli

Installation successful:

After the installation is complete, enter vue -v (note that there is a capital “V”) as shown in the following figure. If the corresponding version number is displayed, the installation is successful.

C: Users\Andminster\AppData\Roaming\ NPM

Node_modules can also be opened to see:

First, I create a folder (DXL_vue) on disk D as the project directory, and then use the command line CD to enter the project directory:

Vue init webpack baoge Baoge is a user-defined project name. After the command is executed, a project folder named baoge is generated in the current directory.

After entering the command, several options are presented for you to answer:

Project name (baoge) : —– project name, enter the default name in parentheses (Sorry, name can no longer contain capital letters), You can refer to it. Project Description (A vue.js Project) : —- Project description, you can also directly click Enter, use the default name Author () : —- Author, enter dongxili next will let the user select: Runtime + Compiler: recommended for most users Runtime + Compiler: recommended for most users about 6KB lighter min+gzip, But templates (or any ue-specificHTML) are ONLY allowed in. Vue files-render functions are required elsewhere ONLY when running, Install vue-router (Y/n) Indicates whether to install vue-Router. This is the official route and is used in most cases. Enter Y and press Enter. Use ESLint to lint your code? (Y/n) Whether to use ESLint to manage code. ESLint is a code style management tool that is used to unify code styles and is used in general projects. Pick an ESLint preset (Use arrow keys), preset code style for writing Vue projects, and press Y to Setup unit Tests with Karma + Mocha? Setup E2E Tests with Nightwatch(Y/n) Whether to install the E2E test, I choose install Y press Enter after the answer is finished, the above picture starts to build the project.

You can see that there is a new project folder named baoge in the directory.

NPM install (if the installation is slow. To install taobao image, open the command line tool, type: NPM install -g CNPM — registry.npm.taobao.org and use CNPM to install.)

NPM install: Install all modules. If you want to install a specific module, enter the name of the module after install. Simply typing install will install the modules that depend on the package.json file in the root directory of the project (this file is not allowed to have any comments), which is available in every NPM managed project and is the entry file for NPM operations. Since it was an initial project, I didn’t have any modules yet, so I used NPM Install to install all the modules. After the installation is complete, there will be a new node_modules folder in the directory, where all the dependent modules will be stored. And now, the directory in the baoge folder looks like this:

Explain what each folder represents (look at this image carefully) : image.png 3. If the browser does not load the page, the local port 8080 May be occupied. You need to modify the index.js file in the config file

Also, it is recommended to change the path prefix of the assetsPublicPath in the build to ‘./ ‘(starts with’/’) when debugging the project locally, because after packaging, if the path starts with ‘/’ when importing JS and CSS files externally, The corresponding file cannot be found locally (no problem on server). So if you want to open the packaged file locally, you have to change the file path. My port is not occupied, and I succeeded (the browser will open a “welcome page” by default after the service is successfully started) :

Note: When debugging vUE pages, be sure to download a VUe-tool extension from the Google Store. 4. Vue-cli webPack configuration analysis From package.json you can see the entry to the development and production environments.

Can be seen in the dev Settings, build/webpack. Dev. Conf., js, the file is a development environment webpack configuration of the entrance. In webpack.dev.conf.js comes webpack.base.conf.js, which is the common WebPack configuration for development and production environments, and even test environments. It is fair to say that this document is quite important. And config/index, js, build/utils, js, build/build js, specific look at the introduction: segmentfault.com/a/119000000… Note that all your project files need to be placed in the SRC folder. After the project is developed, you can type NPM Run Build to do the packaging.

NPM run build

1. How to exit or close NPM run dev? Add devDependencies to the package.json dependencies section. Add devDependencies to the package.json dependencies section The installation package information is added to devDependencies –save-dev installation package information is added to devDependencies, so it is used in development

After the package is complete, the dist folder will be generated. If you have changed the file path, you can directly open the local file to view it. When the project goes live, all you need to do is put the Dist folder on the server.

Well, the most detailed version of VUE2 scaffolding comes out, because it is the first family bucket, so it is too detailed, I will only write the key steps, add more examples. [smile

Article reprinted: Le Byte