前端（vue系列）：用vue-cli搭建项目

本章主要内容有

• 安装vue-cli脚手架
• 用脚手架创建项目
• vscode安装常用插件

注：博主用的编辑器是vscode，所以插件什么的也适用于vscode，用其他编辑器的小伙伴，找一下度娘。

• 安装vue-cli脚手架

打开vscode，然后按 ctrl+shift+ ` 会出现如下界面（控制台）

控制台.PNG

然后在其中输入

npm install -g @vue/cli   //用npm的运行该命令
# OR
yarn global add @vue/cli  //用yarn的运行该命令

安装成功后运行

vue --version

将得到相应的版本号

注：在新建项目时必须先安装node，node有自带的npm，未安装的请点击这里进行下载安装

• 用脚手架创建项目

  在用脚手架创建项目前必备工作有如下：
  • 建一个英文命名的文件夹作为开发文件存放空间
  • 有仓库的，如GitHub，码云的关联下，没有的可以建一个。当然不建也没关系。只是一旦代码丢了就难找回来了。

在经过如上工作之后在控制台运行如下命令

vue create 你的项目名 //最好用英文

你将会得到如下界面

提示.PNG

注： 新手最好选择默认，如果是对配置较为熟悉的同学可以选择自选或者自行配置。

选择后将自行创建项目，创建后目录如图所示：

项目目录.PNG

注：博主的是逻辑使用js，喜欢ts的小伙伴，请找度娘或者点击这里

• vscode安装常用插件

  操作步骤如下图

  
  
  

  操作步骤.png

因为博主在网上看到一篇比较好的插件讲解文章，所以博主就不对进行插件的叙述了，需要的可以看一下
作者是梁源大佬的使用Visual Studio Code编写Vue的札记 需要的自取。

本文参考:
vue-cli创建项目

注：如有侵权，请联系博主删除！