vue預習---開發環境準備

Visual Studio Code安裝及使用

下載地址

官網： https://code.visualstudio.com/

使用指南

代碼提示

創建hello.js，體驗vscode代碼提示功能

const hello = 'hello';
console.log(hello);

調試

默認支持node調試，F5啓動調試
若要支持網頁調試，需安裝Debugger for Chrome，如下是基本配置方式

{
linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/index.html",
            "webRoot": "${workspaceFolder}/wwwroot"
		}, {
		},
 	]
}

Git集成

遷出已存在項目，比如: https://github.com/57code/ts-study

command palette 
git:clone 
填入地址回車

已存在項目，比如當前項目test

source control
Initialize Repository
選擇test項目
git:Add Remote
填寫remote name爲origin
添加remote url爲https://github.com/57code/test

代碼提交

source control 
填寫Message 
Git:Commit

代碼推送

Git:Push
填寫用戶名 
填寫密碼

擴展

安裝vetur和vue vscode snippets

vue-cli安裝及使用

安裝

npm i -g @vue/cli

使用

快速原型開發

首先安裝全局擴展

npm install -g @vue/cli-service-global

啓動開發服務器

vue serve ./Hello.vue

創建項目

vue create project-name

使用插件

安裝vue-router

vue add router