Vue Study [1]: Vue Setup

Description

The article for vue.js Setup.
Original post link:https://www.cnblogs.com/markjiang7m2/p/10783456.html
Source code:https://gitee.com/Sevenm2/Vue.Web/tree/master/Vue.Web

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 TaxSystem, 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 nodejs.org and install. You should select your version.
NodeJs_download

Set environment variables
Node_EnvirPath

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

node -v
npm -v

Node_v.png

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
Node_path

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
Node_global_EnvirPath

vue-cli

Install vue-cli as a global module.

npm install -g vue-cli

Npm_vue

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

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

Vue_newproject

Config the PORT No.
Vue_configport

Enter the project folder and run the project

cd Vue.Web
npm run dev

Vue_port

Then we can view the Website in browser.
Vue_demo

We can also build the project

npm run build .

Vue_build

Vue_dist

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 dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

转载于:https://www.cnblogs.com/markjiang7m2/p/10783456.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值