Vue-cli 3.0 construction project

Vue-cli 3.0 Function configuration and directory

1. Version 3.0 includes default Settings and user – defined Settings

2. The 3.0 directory structure is much more streamlined compared to 2.0

   • Remove configuration file directories (config and Build folders)
   • Remove static folder, add public folder, and move index.html to public
   • The views folder has been added to the SRC folder for sorting view components and public components

Vue – 3.0 build cli

1. Install or upgradeNode.js

   Vue CLI requires node.js 8.9 or later (8.11.0+ recommended).Copy the code

2. The installationVue cli – 3.0

   npm install -g @vue/cli
   Copy the code

   Note that if you have installed an older version of vue-cli(1.x or 2.x) vue-cli globally, you need to uninstall vue-cli via NPM uninstall vue-cli -g or YARN Global Remove VUe-cli.Copy the code

   • Vue-cli scaffolding construction

   Vue create hello-world (Create a vue front-end project named hello-world)Copy the code

   • Project configuration options

     A, Manually select features

     

     If you are using 3.0 for the first time, there is no first option (myProjectinit - this is the default configuration), only the last two, the first is the default configuration, usually choose the second, configure yourself, here choose the second.Copy the code

     
     

     B. Select the features required by the project (select according to your own needs)

     

     The options here are: Babel compilation, Vue routing, Vue state Manager, CSS preprocessor, code detectionCopy the code

     
     

     C. Whether the router uses the history mode

     

     Select Y for the general Vue+ VUe-Router +Webpack Web development scenario, usehistoryModel can beCopy the code

     
     

     D. Select the CSS preprocessor language

     

     Select the second Sass/SCSS (with Node-sass)Copy the code

     
     

     E. Select the ESLint code specification, here using the Standard code specification

     

     Standard, which is set by some front-end engineers.Copy the code

     
     

     F. When to monitor the input code

     

     Select input monitoring when savingCopy the code

     
     

     G, Babel, PostCss, ESLint, etc

     

     Choose to save them separately in their own configuration filesCopy the code

     
     

     H, ask if you want to save this configuration item as a default configuration (myProjectinit is the default configuration I saved in the first step)

     

     So what I'm going to do is I'm not going to save N and I'm going to save YCopy the code

     
     

     I. Wait for vue-CLI initialization to complete

     

     

     The project directory structure is shown below:

     

     Initialization is completecdRun NPM run serve to start the project. If you are not used to start the project, manually open the package.json file in the root directory to find it"serve": "vue-cli-service serve"Change serve to devCopy the code

     Vue - CLI 3.0 also provides a UI console for the management of input projects installation NPM I -g@vue/CLI When executing vue UI on the terminal, localhost:8000 is initialized by default and automatically openedCopy the code

     Introduction to vuE-CLI 3.0 UI Console Visual project management interface This article introduces vue-CLI 3.0betaUI interface experience