1. Development tool - VS Code
Choose VS Code because it is an easy tool to use. Each function found in VS Code completes an excellent job. It has built some simple function sets, including syntax highlighting, intelligent completion, integrated git and built-in debugging tools in the editor, which will make your development more efficient.
Download address
Official website: https://code.visualstudio.com/
Recommended plug-ins
- Vetur - syntax highlighting, intelligent perception, Emmet, etc
- Vue VSCode Snippets - quickly generate Vue templates
- EsLint -- syntax error correction
- Auto Close Tag -- automatically close HTML/XML tags
- Auto Rename Tag - automatically complete the synchronous modification of the tag on the other side
- Path Intellisense - automatic road reinforcement
- Bracket Pair Colorizer -- add a bright color to the brackets in the code
You can find the documentation about the extension here:
https://code.visualstudio.com/docs/extensions/overview
2. Install node js
Node.js is a JavaScript running environment based on Chrome V8 engine. Node.js uses an event driven, non blocking I/O model.
Download address
Official website: https://nodejs.org/en/ (all the way to next)
After installation, you can view the corresponding versions of node and npm on the console
node -v npm -v
Taobao permanent image command:
npm config set registry https://registry.npm.taobao.org
3. Install Vue devtools
vue devtools is a plug-in based on chrome browser, which is used to debug vue applications, which can greatly improve our debugging efficiency. Next, let's introduce the installation of vue devtools.
Installation mode
Method 1: direct installation in chrome store
Vue devtools can be downloaded and installed directly from the chrome store
Mode 2: manual installation
① Find the github project of Vue devtools and clone it locally vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
② Install the npm package required by the project
npm install
③ Compile project files
npm run build
④ Add to chrome browser
Browser input address“ chrome://extensions/ "Enter the extension program page and click" load the decompressed extension program "Button, select the chrome folder under Vue devtools > shells.
If you don't see "load decompressed extension..." Button, you need to check "developer mode".
Method 2: provide a download address of version 4.1.4
Link: https://pan.baidu.com/s/1B1QhnXBvVLnuSFrnDYbs5A
Extraction code: rq9c
Tips
Open the extension program of chrome, drag the downloaded file in and install it.
The installation is successful, as shown in the figure below
Vue devtools use
After installation, you need to close the browser and reopen it before you can use it
After the browser opens the vue item, press F12 and select vue Vue is data-driven, so we can see the corresponding data, which is convenient for us to debug
4. Vue cli installation and use
Install Vue cli
npm install @vue/cli -g
Create a project
vue create <Project Name> //The file name does not support humps (including uppercase letters)
The specific operations are as follows:
1. Select a preset
① Except for the last two options, the other options are the preset configuration you saved before (as shown in the figure below, the first "my default" is the preset configuration you saved before, which can be used directly now)
② If no configuration has been saved, there are only two options:
Default (babel, eslint): the default setting (direct enter) is suitable for quickly creating a prototype of a new project without any auxiliary npm package
Manually select features: user defined configuration (press the arrow key ↓) is a production oriented project we need, and an npm package that provides optional functions
2. To customize the configuration, you need to select the configuration items you need
? Check the features needed for your project: >( ) Babel //Transcoder, which can convert ES6 code into ES5 code for execution in the existing environment. ( ) TypeScript// TypeScript is a superset of JavaScript (suffix. js) (suffix. ts). It contains and extends the syntax of JavaScript. It needs to be compiled and output as JavaScript to run in the browser. At present, it is rarely used ( ) Progressive Web App (PWA) Support// Progressive Web application ( ) Router // vue router ( ) Vuex // vuex (state management mode of vue) ( ) CSS Pre-processors // CSS preprocessor (e.g. less, sass, stylus) ( ) Linter / Formatter // Code style checking and formatting (e.g. ESlint) ( ) Unit Testing // unit tests ( ) E2E Testing // e2e (end to end) test
3. Select the specific toolkit for the corresponding function
① Use history router
Vue router uses the features of the browser's own hash mode and history mode to realize front-end routing (by calling the interface provided by the browser)
② css preprocessor
It mainly solves the problems of browser compatibility and CSS code simplification for CSS
③ ESLint:
A plug-in javascript code detection tool is provided. ESLint + Prettier / / is widely used
④ When to detect: check the link when saving or submitting
unit testing
? Pick a unit testing solution: (Use arrow keys) Mocha + Chai //mocha is flexible and only provides a simple test structure. If other functions are required, other libraries / plug-ins need to be added. Must be installed in a global environment > Jest //The installation configuration is simple and easy to use. Built in Istanbul, you can view the test coverage. Compared with Mocha, it has simple configuration, simple test code, easy integration with babel and rich expect
⑤ How to store configuration:
⑥ Whether to save this configuration (y: record this configuration, and then you need to give a name; n: do not record this configuration)
⑦ Completion of Construction: start the project according to the prompt
Visualization project
vue ui
directory structure
|-- src // Source directory | |-- components // vue common component | |-- router // Route management of vue | |-- App.vue // Page entry file | |-- main.js // Program entry file to load various public components |-- public // Static files, such as some pictures, json data, etc | |-- favicon.ico // Icon file | |-- index.html // Entry page |-- vue.config.js // Is an optional configuration file that contains most of the vue project configurations |-- .babelrc // ES6 syntax compilation configuration |-- .editorconfig // Define code format |-- .gitignore // File format to be ignored for git upload |-- .postcsssrc // postcss profile |-- README.md // Project description |-- package.json // Project basic information, package dependency information, etc
Create a new Vue under the root directory as needed config. JS self configuration, eg: (simple configuration, see the official website for more configuration details: https://cli.vuejs.org/zh/config/)
module.exports = { baseUrl: '/',// The root path when deploying the application (default '/'), or the relative path can be used (there are usage restrictions) outputDir: 'dist',// When the build environment is run, the files generated by DIS will be cleared (default '') assetsDir: '',//The directory (relative to outputDir) where the generated static resources (s, css, img, fonts) are placed (default '') indexPath: 'index.html',//Specify the generated index The output path of HTML (relative to outputDir) can also be an absolute path. pages: {//The path and file name configured in pages must exist in your document directory, otherwise an error will be reported when starting the service index: {//It is optional except entry entry: 'src/index/main.js',// Page entry. Each "page" should have a corresponding JavaScript entry file template: 'public/index.html',// Template source filename: 'index.html',// In dist / index HTML output title: 'Index Page',// When using the title option, use in the template: < title > <% = htmlwebpackplugin options. title %></title> chunks: ['chunk-vendors', 'chunk-common', 'index'] // By default, the blocks included in this page will include the extracted general chunks and vendor chunk s }, subpage: 'src/subpage/main.js'//Official explanation: when using the entry only string format, the template will be deduced as' public / subpage HTML ', if not found, go back to' public / index HTML ', the output file name will be deduced as' subpage html' }, lintOnSave: true,// Check when saving productionSourceMap: true,// Does the production environment generate sourceMap files css: { extract: true,// Whether to use the css separation plug-in ExtractTextPlugin sourceMap: false,// Open CSS source maps loaderOptions: {},// css preset configuration item modules: false// Enable CSS modules for all CSS / pre processor files }, devServer: {// Environment configuration host: 'localhost', port: 8080, https: false, hotOnly: false, open: true, //Configure auto launch browser proxy: {// Configure multiple proxies (configure one proxy: 'http://localhost:4000 ' ) '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } } }, pluginOptions: {// Third party plug-in configuration // ... } };
vue dependent installation commands
npm install axios --save-dev //Install axios npm install mockjs --save-dev //Install mockjs npm install vue-lazyload --save-dev //Installing Vue lazload npm install vue-cookie --save-dev //Install Vue cookies npm install element-ui --save-dev //Install element UI npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev //Install multiple dependencies at once