Description

The article for vue.js Setup.

Original post link:

Source code:

Development Environment Preparation

Node.js

If we want to develop Vue.js, we should install Node.js firstly.

Actually I have installed Node.js in my environment when I started my another repository , but without any note to mark down the action. I will write down the procedure here.

1.Install Node.js

Download Node.js install package from and install. You should select your version.

Set environment variables

And then you can input the command line to verify if Node.js is installed successfully.

node -vnpm -v

2.Environment Configuration

The node cache files and global modules will be installed and saved into C:\Users\xxx\AppData\Roaming\npm by default. We have better to change the path as our system disk space is limited.

Create 2 folders node_global & node_cache

Reset the configuration in CMD.

npm config set prefix "D:\Mark\nodejs\node_global"npm config set cache "D:\Mark\nodejs\node_cache"

Add the environment variables

vue-cli

Install vue-cli as a global module.

npm install -g vue-cli

Input a command line to verify if vue-cli is installed successfully.

Setup a vue project

Use Visual Studio Code to open the folder you want to create the project in.

Click Ctrl + ~ to open the Terminal.

Input the below command line to new a project based on webpack and select the setting as requested.

vue init webpack projectname

Config the PORT No.

Enter the project folder and run the project

cd Vue.Webnpm run dev

Then we can view the Website in browser.

We can also build the project

npm run build .

vetur

It is an extension Vue tooling for VS Code.

1.Install vetur

Click Ctrl + P, input ext install vetur, then install the extension.

2.Add the below in User settings

Click Ctrl + Shift + P, input Preferences: Open User Settings.

Add the below in User settings

"emmet.syntaxProfiles": {  "vue-html": "html",  "vue": "html"}

Build Setup command line

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpm test