vue-cli3.0 installation
1 If you have previously installed an older version of the global vue-cli (1.x or 2 .x), you need to uninstall it: 2 3 npm Uninstall VUE-cli - G 4 Installation 5 6 npm install -g @ VUE / cli // install cli3.x 7 VUE --version // query whether the version 3.x 8 If you do not want to cli3.x, cli3 2.x can use the template, the command is as follows: 9 10 npm install -g @ VUE / cli-init // install this module 11 // you can use the template 2.x: vue init webpack my-project
node environment
1 3.x version requires Node.js8.9 or higher (recommended 8.11.0+ the Node under), before use, please check the version ordered as follows: 2 3 the Node - v 4 if your version is not enough, you can use the following command line to the Node version update to the latest stable version: 5 6 npm install the -gn // install module this module is designed to manage the node.js version, install or use the yarn: yarn, Ltd. Free Join @ VUE the Add / cli 7 stable the n- // update your node version 8 under mac If you are prompted enough authority, execute: 9 10 sudo the n-stable 11 after installation, remember to check the version number: View version (if the installation was successful): vue -V (uppercase V)
Create a project
1, the command:
1 vue create hello-word
hello-word is the name of the folder, if there is no will automatically create a folder, if there will be installed into that folder.
The difference is that the 2.0 is no longer here to select a template, but the default presets.
Note: Press the keyboard arrow keys to select the default (default) or manually (Manually), // If you select default, all the way down on the list to perform a carriage return (Note: now vue-cli3.0 defaults yarn download), here I choose manually.
Here the default setting is ideal for rapid prototyping to create a new project, and manually set offers more options, they are more project-oriented production needs.
Custom Configuration:
Select [Custom], up and down arrow keys to move, Space to select, Enter to determine, custom configuration, you will see these configuration items:
? Please Pick A PRESET: Manually the SELECT Features the Check at The Features needed? For your Project: (Press <Space> to the SELECT, <a> to Toggle All, <i> to Rate History For Converting Selection) > () TypeScript // support the use of TypeScript writing Source () Progressive Web App (PWA) support // PWA support () Router // support Router-VUE () vuex // support vuex () CSS the pre-processors // support CSS preprocessor. () Linter / Formatter // support code style checking and formatting. () Unit Testing // support unit testing. () E2E Testing // support E2E testing. // Note: What you want to integrate the election on the line (Note: The spacebar is to select and cancel, A key to the whole election)
Vue-cli3.0 After installation is complete, you will find a basic directory structure than 2.0 relative to a lot of streamlining. webpack missing configuration directory, that is, no build, config these two folders, and want to configure it, you need to create vue.config.js file in the root directory of the project.
- The advantage of this approach for white is very friendly , not one up on the two folders, a bunch of files and watch have a big head.
- Then quoted
copyOthers 1 configuration, is also very convenient , simply copy files over just fine. - static folder to the public, router folders into a single class of documents.
-
In what webpack custom configuration , we need to create a new root directory vue.config.js file, the file should export an object, and then configure details refer to the official documentation
. 1 // vue.config.js 2 module.exports = { . 3 // Options ... 4 }
Directory Description:
Use graphical interface
You can also create and manage projects through graphical interface vue ui command:
1 view ui
The above command will open a browser window, and a graphical interface will guide you through the process of project creation.
Startup project
After the initial completion, the project into the root directory: cd my-project
command
1 npm RUN serve // before npm run dev is not
entered in the browser http: // localhost: 8080 you can see the welcome screen vue
Package on-line
-
vue-cli command also provides packaged, carried out under the project root directory: npm run build
-
After you have performed, you can see the project root directory more of a dist directory, the directory is a good package of all the static resources deployed directly to a static resource server just fine.
vue.config.js configuration instructions
Here a simple list of vue, config.js some configuration items of course when you configure the interface address or to get in main.js or in a separate configuration file interface address this through the following:
. 1 var the env = process.env.NODE_ENV 2 the console.log (the env) . 3 vue.config.js File: . 4 . 5 // vue.config.js configuration instructions 6 // only a part of this column, the specific configuration miserable ah test document 7 = module.exports { . 8 // the baseUrl type: {String} default: '/' . 9 // base URL to deploy applications 10 // the base URL to deploy the application. 11 // By default, Vue CLI assume that your application will be deployed in the root directory of your domain. 12 // https://www.my-app.com/. If the application is deployed on the sub-path, you need to use this option to specify the sub path. For example,
// if your application is deployed https://www.foobar.com/my-app/, baseUrl set to '/ My-App /'. 13 is 14 baseUrl: process.env.NODE_ENV === 'Production's' '/ Online /':? '/' , 15 16 // outputDir: build directory type files when RUN Build npm: String, default: 'dist' 17 18 // outputDir: 'dist', . 19 20 is // pages: {type: Object, the Default: undfind} 21 is / * 22 is . Construction of multi-page mode application, each "page" should have a corresponding entry in JavaScript file. The value should be a 23 object, where the key is the name of the entry, and this value is either specify its entry template and target file name or the designation of its entry 24 strings, 25 Note: Please ensure that pages in the configuration the path and file name in your file directories exist otherwise start the service will be error of 26 * / 27 // Pages and the: { 28 // index: { 29 // entry for the page 30 // entry: 'src/index/main.js', 31 // the source template 32 // template: 'public/index.html', 33 // output as dist/index.html 34 // filename: 'index.html' 35 // }, 36 // when using the entry-only string format, 37 // template is inferred to be `public/subpage.html` 38 // and falls back to `public/index.html` if not found. 39 // Output filename is inferred to be `subpage.html`. 40 // subpage: 'src/subpage/main.js' 41 is // }, 42 is 43 is @ lintOnSave: {type: Boolean default: Q} to true if you use eslint 44 is lintOnSave: to true , 45 @ productionSourceMap: {type: Bollean, default: Production source mapping to true} 46 // if You do not need to produce at source map, then this can speed up production to false construct 47 productionSourceMap: false , 48 // devserver: {type: Object attributes. 3} Host, Port, HTTPS 49 // which supports webPack-dev All the options -server 50 51 is devserver: { 52 is port: 8085, // port number 53 is Host: 'localhost', 54 is HTTPS: to false , // HTTPS: {type: Boolean} 55 Open: to true , // arranged automatically starts the browser 56 is // Proxy: 'HTTP: // localhost: 4000' // configuring inter process, only a agent 57 is proxy: { 58 '/ API' : { 59 target: '<URL>' , 60 WS: to true , 61 is changeOrigin: to true 62 is }, 63 is '/ foo' : { 64 target: '<other_url>' 65 } 66 } // configure multiple proxy 67 } 68 }