Vue学习日志1——vscode配置vue开发环境

下载 vscode: https://code.visualstudio.com/

下载nodejs: https://nodejs.org/en/

cmd 中    node -v  测试是否安装成功

cmd  中 npm prefix -g  查看全局下载模块保存目录

npm set prefix -g + {自定义新目录} （我这里是D:\Programs\nodejs\node_global）

安装 cnpm 

npm install -g cnpm --registry=https://registry.npm.taobao.org

将cnpm的安装目录D:\Programs\nodejs\node_global\node_modules加入path（cmd调用cnpm时系统查找cnpm的路径）

新建NODE_PATH环境变量，将D:\Programs\nodejs\node_global\node_modules加入。

cmd  进入 node 然后   输入 module.paths查看上述目录是否成功加入。

cmd cnpm install -g  vue-cli  下载vue-cli

新建文件夹vuelearn

打开cmd 进入vuelearn目录 运行 vue init webpack myproject(

vue init 模板类型 项目名称；

模板类型有很多种；使用vue list查看

)

cd myproject

npm install

npm run dev

到这里简单的vue项目目录就搭建完成。

VScode配置

下载各种必要的extension是 比如中文 ， vuetur

下载快捷键文档

设置字体

然后重点讲设置editor的背景颜色为豆沙绿的护眼色，使用vs light color theme

进入安装目录下的\resources\app\extensions\theme-defaults\themes 文件夹

打开light_vs.json文件，在tokencolors下 添加新的键值对如下。

	"colors": {
				// Editor
				"editor.background": "#C7EDCC" //护眼色豆沙绿
	}

重启vscode 发现editor背景色变为豆沙绿。