I happen to be working on vUE related projects recently, so I want to try Vue-CLI3.0. The following are some records after use, for the convenience of future review

Install the vue – cli3.0

Vue-cli3.0 package name changed from vue-cli to @vue/cli. X or 2.x) has been installed globally, run NPM uninstall vue-cli -g or yarn global remove vue-cli to uninstall it. I’m using YARN here. After uninstalling, use the following command to install globally

yarn global add @vue/cli
Copy the code

Create a project

vue create project-name
Copy the code

After entering the command, you will be asked to select the creation method, default is the default, manully is manual, the first time it is recommended to create manually, you can create according to their own needs, after the creation will let you choose whether this configuration, the first two are saved when I created before, if you want to use the next time directly select the line.

The directory structure

The vue-CLI3.0 directory structure is much cleaner than the previous one. The build folder and config folder are removed, and the public folder is added.

The public folder has an index. HTML, which is the template file. The default is index. HTML. If you are developing multiple pages and have different template files, you can create multiple template files.

SRC has Components and assets folders. Components are for custom components and assets are for static resources such as images, styles, js, etc. You can also create folders in SCR to separate CSS or JS, depending on your personal style.

Vue is a page file. If you have more than one page, you can create a pages folder, such as the following. Each folder is a page. There are entry files and page files, but you need to configure pages in vue.config.js

Related configurations can be configured in vue.config.js. For details, please click cli.vuejs.org/zh/config/. Here is the configuration I used

Vue. Config. Js configuration

Create the vue.config.js file in the same directory as SRC. The contents are as follows

module.exports = {
  publicPath: ". /".pages: {
    index: {
      // Page entry
      entry: "src/pages/index/index.js".// Source of template
      template: "public/index.html".// Output in dist/index.html
      filename: "index.html".// When using the title option,
      / / title of the template tag needs to be < title > < % = htmlWebpackPlugin. Options. The title % > < / title >
      title: "Page Title 1".// The blocks contained in this page are included by default
      // The extracted generic chunk and Vendor chunk.
      chunks: ["chunk-vendors"."chunk-common"."index"]},index2: {
      entry: "src/pages/index2/index2.js".template: "public/index.html".filename: "index2.html".title: "Page Title 2".chunks: ["chunk-vendors"."chunk-common"."index2"]}}};Copy the code
  • PublicPath publicPath defines the relative path so that the image path does not report errors after being packaged

  • Pages page configuration, in which two pages are defined to share an index.html template

Use of environment variables and patterns

Vue-cli provides three modes, which are

  • The Development pattern is used forvue-cli-service serve
  • Production mode is used forVue-cli-service build and vue-cli-service test:e2e
  • The test mode is usedvue-cli-service test:unit

Please see here for specific introduction

I created three separate files in the directory, as shown below:

The contents of.env.development are as follows:

NODE_ENV = development
VUE_APP_NODE_ENV = development
Copy the code

The contents of.env.qa are:

NODE_ENV = production
outputDir = 'dist/qa'
Copy the code

.env. Production is as follows:

NODE_ENV = production
VUE_APP_NODE_ENV = production
outputDir = 'dist/production'
Copy the code

NODE_ENV is an environment variable, and VUE_APP_NODE_ENV is the schema name of the environment. When using the schema in a project, you must prefix it with VUE_APP_, and then you can get the current schema in the project by process.env.vue_app_node_env.

Environment variables can help us to use during development period and is launched according to different environment with different variables, such as in the back-end will generally provide test interface development period, then we can according to the environment variables using the test interface in the development period, wait to launch the package that it is using the online interface, and of course to write good interface configuration file in advance, Then configure the command in package.json, as shown below:

You can specify mode packaging by adding the –mode mode value to the end of the command

The last

This is the vue-CLI3.0 project basic content, there are other more advanced content to read more documentation