VUE CLI environment construction document

1. Install Node.js

Download address

https://nodejs.org/zh-cn/download/

2. Global installation of VUE CLI

Press win+R to open the run cmd window and enter the following code. Due to the speed of npm official image access network, we choose to use Taobao's image source

npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli 
npm install -g @vue/cli-service-global
npm install -g @vue/cli-service
2.1 command line
Usage: create [options] < app name >
Create a new project supported by 'Vue cli service'
Options:
  -p. -- preset < presetname > ignore the prompt and use the saved or remote preset options
  -d. -- default ignore prompt and use default default default options
  -i. -- inlinepreset < JSON > ignore the prompt and use the inline JSON string preset option
  -m. -- packagemanager < command > uses the specified npm client when installing dependencies
  -r. -- registry < URL > use the specified npm registry when installing dependencies
  -g. -- git [message] forces / skips git initialization and optionally specifies the initialization submission information
  -n. -- no git skip git initialization
  -f. -- force overwrites the possible configuration of the target directory
  -c. -- clone use git clone to get remote preset options
  -x. -- proxy creates a project using the specified proxy
  -b. -- bare omits the novice guidance in the default component when creating a project
  -h. -- help output help information
2.2 visualization tools
vue ui

3. Install Vue router

3.1 order
npm install vue-router
3.2 modify main.js to add a code and a reference to Vue router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  base: '/ap',    //To solve the problem of blank pages after publishing subsites, if publishing in subsites or subdirectories, you need to set
  mode: 'history',//Routing mode: history is a direct route access, hash is the way of hash (Note: there is a truncation problem in forwarding the hash mode in the visit of the public number).
  routes: routers //routers is the route configured in the router.js file
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
3.3 add router.js file and relevant routing settings
import Home from './components/HelloWorld.vue'
import defaults from './components/Default.vue'
const routers = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/:id',//But the slash is the default homepage path. You can set the corresponding parameter name by colons. In the component, you can get the corresponding parameter name by $route.params.id
    component: defaults
  }
]
export default routers
3.4 modify the App.Vue file and add the router view component
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

4. Compile environment configuration

4.1 mode profile
.env                # Loaded in all environments
.env.local          # Loaded in all environments, but ignored by git
.env.[mode]         # Only loaded in the specified mode
.env.[mode].local   # Only loaded in the specified mode, but ignored by git

Environment files prepared for a specific pattern (for example,. env.production) will have a higher priority than general environment files (for example,. env).
In addition, environment variables that already exist when Vue CLI starts have the highest priority and are not overwritten by. env files.

4.2 environmental variables

The environment variables in the configuration file must start with Vue ﹣ app ﹣ and an environment file only contains the "key = value" pair of environment variables

VUE_APP_APISERVER="http://127.0.0.1/api/"
4.3 mode

Pattern is an important concept in the Vue CLI project. By default, a Vue CLI project has three modes:

  • development mode for Vue cli service service
  • production mode is used for Vue cli service build and Vue cli service test: E2E
  • Test mode for Vue cli service test: Unit
4.4 use environment variables

If you want to use it in a. js file, you need to introduce a vue object at the beginning of the file

"use strict";
import Vue from 'vue';

On the page, you can call the corresponding environment variables through process.env, such as:

console.log(process.env.VUE_APP_SECRET)

5 compilation

Development environment (this compilation corresponds to the development mode and loads the corresponding. env.development configuration file)

npm run serve

Production environment (this compilation corresponds to production mode, and the corresponding. env.production configuration file is loaded)

npm run build

Tags: Javascript Vue npm git JSON

Posted on Mon, 13 Jan 2020 23:42:14 -0500 by Rovas