Vue development environment setup

Vue development environment setup

Vue's official tutorial address

Install npm

npm is integrated in nodejs, so nodejs needs to be installed. The official address is view the current npm version

npm --version

Upgrade npm

sudo npm install -g npm

Install vue

npm install vue

Install Vue CLI scaffolding

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue-list ->/usr/local/lib/node_modules/vue-cli/bin/vue-list
/usr/local/bin/vue-init ->/usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue ->/usr/local/lib/node_modules/vue-cli/bin/vue
+ vue-cli@2.9.6
added 121 packages from 134 contributors, removed 10 packages, updated 1 package and moved 97 packages in 132.885s

Install webpack

npm install webpack -g


npm run dev

nvm installation

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.bash_profile or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
  [-s "/usr/local/opt/nvm/"] &&. "/usr/local/opt/nvm/" # This loads nvm
  [-s "/usr/local/opt/nvm/etc/bash_completion"] &&. "/usr/local/opt/nvm/etc/bash_completion" # This loads nvm bash_completion

Install Vue.js devtools

cdn acceleration address

<script src=""></script>

Create a project using CLI3

npm uninstall -g vue-cli
npm install -g @vue/cli
vue --version

Use scaffolding to create a helloworld project

vue create hello-world
Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features
? Successfully created project hello-world.
? Get started with the following commands:
 $ cd hello-world
 $ npm run serve
cd hello-world
npm run serve

The command used in the CLI3 hot deployment project is

npm run serve

Create the project using the original CLI2 version

vue init webpack my-project
$ vue init webpack my-project

? Project name my-project
? Project description A Vue.js project
? Author baxiang <>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".

Run the project

npm run dev
 DONE Compiled successfully in 4486ms 12:14:53 PM

 I Your application is running here: http://localhost:8080  
Src directory structure
$ tree -L 2
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
└── router
    └── index.js

3 directories, 5 files

Configure hello world routing

Create a HelloVue file in the components folder

      Hello Vue

    export default {
        name: "HelloVue"

<style scoped>


Add routing configuration to index.js under router file

import HelloWorld from'@/components/HelloWorld'
import HelloVue from'@/components/HelloVue'


export default new Router({
  routes: [
      component: HelloWorld
      component: HelloVue

Create a hello world component

<div id="app">
<!-- Display the definition in data to the page through {{}} -->
   //Create Vue instance, Vue instance manages html code
    let vm = new Vue({
       //Specify the range that the vue instance needs to manage through the constructor parameter el attribute. The value of this el attribute is an id
       //Save the data that the page needs to use through the data attribute
            msg:"hello Vue"


Reference: Vue development environment construction-cloud + community-Tencent Cloud