vue-cli+koa2+nuxt.js 构建项目操作笔记

新建项目：

// 新建vue-cli
npm install -g @vue/cli

// 删除vue-cli
npm uninstall vue-cli -g

// 创建一个项目hello-world
vue create hello-world

VSCode新建.vue文件模板：

1. Ctrl + Shift + P打开控制台，输入snippets(首选项：配置用户代码片段）；
2. 接下来输入vue并选择，VSCode会自动生成一个vue.json的文件。这里就是我们要输入模板的地方了;
3. 根据原有注释掉的提示输入模板，具体格式如下（其中$0代表模板生成后，光标停留的位置）：

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"print to console": {
		"prefix": "vue",
		"body": [
			"",
			"",
			""
		],
		"description": "A vue file template"
	}
}

4. 保存，重新启动vscode，新建.vue文件，在文件中输入vue即可看到提示，tab键即可生成原定义模板内容

安装koa-generator

npm install -g koa-generator

koa2 my-project

cd my-project

npm install

npm start (监听模式则执行 npm run dev)

打开localhost:3000

创建nuxt项目

1. npm install -g vue-cli
2. 安装nuxt项目 vue init nuxt-community/koa-template 项目名称
3. 进入项目npm run dev
4. 注意：如果启动失败请升级依赖包版本backpack-core升级到最新版本(0.8.3)，eslint(3.19.0)和exlint-loader(2.1.1)，eslint-plugin-html(3.2.2)也需要升级，不然编译同样报错