TL; DR

  • Install cli3 command linenpm install -g @vue/cli
  • Install preview a single Vue filenpm install -g @vue/cli-service-global
  • Highly recommendedvue uiImport existing projects or create new projects, install plugins, configure ESLint rules, etc
  • Save automatically uniform code style, really cool
  • The custom parameters of the personal generated project are the same here with the UI view
vue create hello-vue
# Select this
> Manually select feature
# Shame I can't ts yet◉ Babel Infection infection TypeScript infection Progressive Web App (PWA) Support ◉ Router ◉ Vuex ❯◉ CSS pre-processors nut Linter/Formatter# do not select the history mode, this is only a project, MY side hash enough
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
# Dart is faster, others are optional❯ Sass/SCSS (with dart - Sass)# add prettier, automatically formatting HTML and CSS in VUE when saving
❯ ESLint + Prettier
# save will automatically lint, commit will be too much❯ ◉ Lint on saveGenerate configuration files separately, at a glance
❯ In dedicated config files
# save configuration
Save this as a preset for future projects? y

Copy the code
  • My level is limited, only for reference

Install cli3

  1. node -v
  • If the value is lower than 8.9.0,, yesnpm install -g nandn stableUpdate Node to the latest stable version, which may be required under MACsudo
  • If an error is reported, the node is not installed
  1. vue --version
  • Execute if version 3 is not availablenpm uninstall vue-cli -g
  • If an error occurs, install cli3 directlynpm install -g @vue/cliAgain,vue --versionUnder the,

The CLI previews a single Vue file

  1. npm install -g @vue/cli-service-global
  2. Go to any folder and create oneApp.vueOf course, there can be other files in the folder, this file is only the startup file
  3. vue serve App.vueNode_module will be generated in the folder and the page can be accessed in the browser
  4. vue build App.vueThe dist folder is generated in the folder and can be deployed

Used to develop a library, components, do some small demo is very suitable!

Command line to create a new project

  1. vue create hello-vueHello-vue is the name of the folder. If it does not exist, the folder will be created automatically. If it does exist, it will be installed in that folder.
  2. The selection template is displayed. Press up or down to select the template
  • Default, the default configuration, meaning only Babel and esLint. After selecting this option, create the project directly
  • Manually select feature: Manually configuration
  • After manual setting, if you save the configuration, there will be multiple options next time
  1. Select the configuration
  • The blank space keyCheck/reverse check,Press a keyAll/none,Press the I keyReverse selection of selected items, up and down key to move up and down selection. You can configure different functions depending on the size of the project and the functional experience
  • The selectedrouterWhen, pay attention!! In qUse history mode for router?Suggest to choosenThe history mode requires some cooperation from the server and can be turned on again if needed later
  • The selectedCSS preprocessorIf sASS is selected, you are advised to select sASSSass/SCSS (with dart-sass)
  • The selectedlint/formatter(support code style check and formatting), personal preferenceeslint+prettier.What the Standard specification is.airbnb
  • In dedicated config filesThe configuration for Babel, postCSS, and ESLint are all separate files. This one is generally chosen
  • Save this as a preset for future projects? (Y/n)// Do you want to record the configuration so that you can continue using it next time? Enter the name of the configuration if necessary
  1. npm run serveOpen your browser and take a look

Creating and managing projects graphically is highly recommended

This article is awesome

The following can not see, not as good as the above, ha ha ha

  1. vue uiRun this command in the folder where you want to build the project, and then look at the dots
  1. Enter the project dashboard
  • To set the Quick start item => Click Custom in the upper right corner => Select Run Task => Select Finish => Click Configure Component
  • Task => Serve => Variables => Specific configurations such as configurable ports, environment variables, and HTTPS enable. Other tasks can also be configured using variables
  • Configuration side, such as setting deployment path, output directory and so on, Eslint rule changes
  • To install dependencies, be careful whether to develop or run them
  • Installing a plug-in

Vuecli uses ultra detailed vuecli