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