vue mounting configuration and project creation

1, the installation vue must install node.js . -------- Quguan network installation node.js

Since npm rely node.js environment, using npm when you need to install node.js. When installing node.js will default npm install. [Npm domestic use slower, recommended cnpm Taobao development: npm install -g cnpm --registry = https://registry.npm.taobao.org ]

In the official website to install node.js, easy to install the latest version, version must be> 8.0;

2, installation vue.js ----- npm install vue [[Recommended] official documents vue

3, mounting cli ----- npm install -g vue-cli

npm install -g @ vue / cli mounted vue-cli3.0

npm install -g @ vue / cli-init pull the old version 2.0 finally upgrade to version 3.0

 

cmd create a project:

vue init webpack project name ---------- create vue project [Note Project name can not be capitalized! ! ]

The correct order of creation vue project, Enter, Enter no Enter not enter, do not install routing code is not checked, no, no, install their own dependence .

After creating the project, the path to locate the project folder root;

npm install; npm run dev / npm start to run the project;

http: // localhost: 8080 / in the browser open

 

Use vscode create vue project:

1. vscode bottom left open terminal;

2. Locate the project file in the root directory;

3. vue create project name;

4. Select a preset ---------- manual selection

? Please pick a preset: (Use arrow keys) select preset 
> default (babel, eslint) default (javascript compiler, javascript code checking tool) 
  Manually to manually select the SELECT Features

　　5. Select [Babel, Router, CSS Pre - processors, Linter / Formatter]

? Check the features needed for your project : (Press <space> to select, <a> to toggle all, <i> to invert selection) :( space Select the desired function, a Select All check items, i reversal) 

> (*) Babel javascript compiler, the code [used to resolve es6 because some browsers do not recognize es6 Code, babel tool can be es6 code is translated into code that the browser can recognize 

 () TypeScript type of script is a superset of JavaScript supports all JavaScript syntax. For: static type checking, the smart prompt function names, refactoring [Rename symbol - may all be modified all references; automatically update the reference path; modified calibration function names will be prompted. ];readability. 
 
 (Progressive Web App (PWA) Support progressive network applications). Advantage [secure - when the network state, a page can be loaded immediately pwa; flash - page loads quickly; do not store downloaded from an application, the user may be directly added to the main screen, is used to provide similar app experience, means not flow] 
 
 (*) Router routing manager for implementing interactive page [control page jump], when switching pages do not need to reload the page, single-page application, without reloading the page, do not jump to a new page just switching components on the page. Passing parameters between pages can also be achieved 
 
 () Vuex [Value for large applications] can solve the data sharing and data between different components of persistent problems. When a plurality of assemblies rely on the same state, or when the state needs to be shared, sharing and easy data communication between the components by vuex.
 
 (*) CSS Pre-processors css preprocessor effect: [file segmentation; Modular - easy hierarchical codes, reuse, dependency management; selector allows nested; Variable - a variable attribute values, easy style unified, peels, etc.; computing - let establish a link between value and values; function; Mixin-- similar function to generate some css code; engineering] 
 
 (*) Linter / Formatter code specification standard 
 
 () Unit Testing test unit 
 
 () E2E testing e2e test

　　6.yes [history modes: routing address are the "#" in the form of display, but sometimes, we hope there are no routing addresses "#", mode: 'history', // remove routing address #]

? Use history mode for router? ( Requires proper server setup for index fallback in production) (Y / n) y 
using historical patterns router? (Need to produce an index fallback set the correct server, that server needs to support)

　　7. Less          https://blog.csdn.net/qq_35430000/article/details/87097696    -----> Sass, Scss, summed up the difference between LESS and Stylus

Pick a CSS pre-processor (PostCSS , Autoprefixer and CSS Modules are supported by default): (Use arrow keys) to select a pre-processor css (default support postcss, autoprefixer modules and css) 
> Sass / SCSS (with dart- Sass) 
  Sass / SCSS (with Node-Sass) 
  Less 
  Stylus

　　8.ESLint with error prevention only [basic]; contain only error prevention function is ESLint JS code checking tool   

? Pick a linter / formatter config: (Use arrow keys) to select a configuration 
> ESLint with error prevention only eslint only error prevention function 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + prettier eslint code specifications and is error-checking tool

　　9.Lint on save; [this is not quite understand

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)		选择其他绒布功能
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

　　10.In dedicated config files saved in proprietary file; [this is not quite understand

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) where you want to place babel, postcss, eslint and other configuration 
> In dedicated config files in a dedicated configuration file   
  In package.json	

　　11.no;

? Save this as a preset for future projects? (Y / N) preset whether to save for future projects this setting

　　

• Wait is created;

• Startup Items: npm run serve

•  

•