Vue NPM and Vue cli development environment installation

1.Vue Devtools

When using Vue, Vue officials recommend installing Vue Devtools on your browser. It allows you to review and debug Vue applications in a more friendly interface.
Vue Devtools installation address: https://github.com/vuejs/devtools#vue-devtools

2.nodejs

Official download: https://nodejs.org/en/download/
① After installation, check whether the installation is successful

# View node version
node -v
# View npm version
npm -v

If the command fails, check whether the environment variable path exists

② Configure the path of npm when installing the global module and the path of cache
In node Create a new node with two folders under the JS installation directory_ global,node_cache

Note that two new folders are given full User control


Then CMD executes the following command

# Set npm global path
npm config set prefix "D:\Dev\ProgramFile\nodejs\node_global"
# Set npm cache path
npm config set cache "D:\Dev\ProgramFile\nodejs\node_cache"

After execution, configure system environment variables:
New NODE_PATH

Add in path

③ npm settings

# View current npm source
npm config get registry
# Set as Taobao source
npm config set registry=https://registry.npmmirror.com
# Switch to official source (switch back to npm source when npm publish)
npm config set registry=http://registry.npmjs.org
# Install cnpm command (the actual measurement shows that although npm is changed to Taobao warehouse, the installation speed is still much slower than cnpm (when there are many modules). It may be related to the file structure of cnpm installation.)
npm install -g cnpm
# Detect cnpm version
cnpm -v

Taobao NPM image has enabled the new domain name, which is replaced by the original domain name http://registry.npm.taobao.org Change to https://registry.npmmirror.com At present, 301 jump has been made to the old NPM image address, but the old http://npm.taobao.org and http://registry.npm.taobao.org The domain name will be out of service from 0:00 on May 31, 2022. If developers use the old domain name, they can start to replace it.

3.Vue-cli

About older versions
Vue CLI package name changed from Vue CLI to @ vue/cli. If you have globally installed the old version of Vue CLI (1. X or 2.x), you need to uninstall it through NPM uninstall Vue CLI - g or yarn global remove Vue CLI.

Node version requirements
Vue CLI 4.x requires Node js v8. 9 or higher (v10 or higher is recommended). You can use n, nvm or nvm windows to manage multiple Node versions on the same computer.

# uninstall
npm install -g @vue/cli
# Install the latest version of @ vue/cli
npm install -g @vue/cli
# Install the specified version of @ vue/cli
npm install -g @vue/cli@5.0.4
# View version
vue -V
# Upgrade global Vue CLI package
npm update -g @vue/cli

4. Create Vue cli project

Switch to the project folder, where the new project will be stored

# Create project
vue create demo-project

Select custom

Select dependency through the ↑↓ arrow, press "space" to select, press "a" to select all, and press "i" to invert the selection.

When creating a project for the first time, you can only select Babel and Router.

a. Babel: transcoder, which can convert ES6 code into ES5 code, and is compatible with browsers that do not support ES6.
b. TypeScript: a superset (. ts file) of JavaScript that contains and extends the syntax of JavaScript. It needs to be compiled and output as JavaScript to run in the browser.
c. Progressive Web App (PWA) Support: progressive Web application
d. Router: vue router (vue route)
e. Vuex: vuex (vue's state management mode)
f. CSS pre processors: CSS pre processors (e.g. less, sass)
g. Linter / Formatter: code style checking and formatting (e.g. ESlint)
h. Unit Testing: unit tests
i. E2E Testing: e2e (end to end) testing

Select vue2

Select vue version here

Select n

Select whether to use the route in the form of history, that is, ask whether the path has a # number.

Select "In package.json"

Ask whether to put the dependent files in a separate file or package JSON: in order to keep the project configuration file clean, select "In package.json" here.

Select n

Ask whether to save the current selection for next use. Select "n" here.

Start after creation

# Enter project folder
cd demo-project
# Start project
npm run serve
# Package project
npm run build

5. Interpretation of Vue cli project structure

5.1 Vue cli project directory structure

There is only index in the whole project Html is a page, so Vue cli project is a SPA (single page application) project.

5.2 package.json file

The modules installed in the project are configured here

{
  // entry name
  "name": "demo-project",
  // edition
  "version": "0.1.0",
  "private": true,
  "scripts": {
    // The npm run serve command actually runs "Vue cli service serve"
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  // Some dependencies of npm installation
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
5.3 configuration file

vuecli3. In the versions above x, an optional configuration file is specially set to streamline the configuration file. Just add the name Vue. JSON in the root directory of the project (the same level as package.json) config. JS files can be automatically loaded by Vue cli. In this file, you can configure some configurations in the vuecli project.

module.exports = {
    devServer: {
        port: 8088 // Modify boot port
    }
}

Posted by mike_y on Sat, 21 May 2022 21:17:47 +0300