VSCode创建项目

第一阶段

虽然网上教程很多，但是还是记录一次完整的步骤

1.安装nodejs,网上一堆的教程，基本上下载后傻瓜式一路next

2.安装npm,网上一堆的教程，也是基本下载后傻瓜式一路next

3.安装完成运行cmd，查看是否安装成功

4.安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。

在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待

5.安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

6.在桌面上新建项目 firstVue

vue init webpack firstVue

--这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的

其中 firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你cd到的文件夹底下

7.运行完成后会要写项目名称啊什么的，可以写一下，也可以在后面的pakeage.json里面修改

8.vs code 打开项目，作者这些自己改就行

9.想要运行这个项目的话，在【终端】-【新建终端】，在打开的输入 npm run dev 回车，接着等

10.运行完成后，自动打开一个端口，复制这个链接到浏览器上，浪起来吧，少年~~~

第二阶段创建vue模板

我们基本只需要关心 src 文件夹，其他的基本不管

1.新建模板保存

打开“文件” —— “首选项”——“户代码片段”， 输入vue，选择vue.json==> 在vue.json文件里填入：

{   

"Print to console": {

"prefix":"vue",

"body": [

"<template>",

"  <div class=\"\">\n",

"  </div>",

"</template>\n",

"<script>",

"export default {",

"  name: '',",

"  data() {",

"      return {}",

"  },",

"  components: {}",

"}",

"</script>\n",

"<style>",

"</style>",

"$2"

        ],

"description":"Log output to console"

    }

}

以上就算配置完成了。接下来是测试：

新建一个vue文件，输入“vue”，按下Enter键就能快速生成自己想要的模板了。

原文章参考出处：https://www.cnblogs.com/zhang1991/p/10073896.html

https://blog.csdn.net/weixin_37590454/article/details/100108211