YouTip

## 1. Standalone Version We can directly download vue.min.js from Vue.js official website and include it using **** tag. [Download Vue.js](https://v2.vuejs.org/js/vue.min.js) * * * ## 2. Using CDN Method The following recommends two stable CDNs for foreign use. No good CDN has been found in China yet, so it is recommended to download to local for now. * **cdnjs** : [https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js](https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js) * **Staticfile CDN (China)** : [https://cdn.staticfile.net/vue/2.2.2/vue.min.js](https://cdn.staticfile.net/vue/2.2.2/vue.min.js) * **unpkg**：[https://unpkg.com/vue@2.6.14/dist/vue.min.js](https://unpkg.com/vue@2.6.14/dist/vue.min.js)。 ## ByteDance CDN (China) [Try it »](#) ## unpkg (Recommended) [Try it »](#) ## cdnjs [Try it »](#) * * * ## 3. NPM Method Since npm installation is slow, this tutorial uses Taobao's mirror and its command cnpm. For installation and usage instructions, refer to: (#). The npm version needs to be greater than 3.0. If it is lower than this version, you need to upgrade it: # View version $ npm -v 2.3.0 # Upgrade npm cnpm install npm -g # Upgrade or install cnpm npm install cnpm -g It is recommended to use cnpm when building large applications with Vue.js: # Latest stable version $ cnpm install vue * * * ## Command Line Tool Vue.js provides an official command line tool for quickly scaffolding large single-page applications. # Install vue-cli globally $ cnpm install --global vue-cli # Create a new project based on webpack template $ vue init webpack my-project # Here you need to do some configuration, just press Enter by default This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project ? Project description A Vue.js project ? Author tutorial ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack Enter the project, install and run: $ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080 After successfully executing the above commands, visit http://localhost:8080/, and the output is as follows: !(#) > **Note:** Vue.js does not support IE8 and below. * * * ## Vue Project Packaging Use the following command to package the Vue project: npm run build After execution, a **dist** directory will be generated under the Vue project, which generally contains an index.html file and a static directory. The static directory contains static files js, css, and image directory images. !(#) If you double-click index.html to open it in the browser directly, the page may be blank. To display it normally, you can modify the paths of js and css files in the index.html file. For example, when we open the dist/index.html file, we see the path is absolute: We change the js and css paths to relative paths: Now you can double-click the dist/index.html file to see the effect in the browser. * * * ## Editors ### VS Code VS Code (full name Visual Studio Code) is a free, open-source, cross-platform code editor launched by Microsoft. VS Code supports Windows, macOS and Linux, with powerful features and flexible extensibility. VS Code Tutorial: [ > In addition, Alibaba and ByteDance in China also have AI IDEs developed based on VS Code: > > * **Alibaba Qoder:** [https://qoder.com/](https://q