Vue脚手架初始化项目

Vue项目初始化

在使用webpack之前,需确保安装好环境,因为我的项目使用npm进行初始化,所以需要先配置node.js的环境,也可以使用yarn进行项目初始化

配置node环境

首先是node.js,到node的官网下载node
node.js官网
node官网
在官网中下载长期支持版,不要下载右边的最新版本,防止版本太新造成bug
下载后安装
打开cmd

$  node -v

如果安装成功,会显示版本号
node版本号

安装完node后,我们开始正式初始化我们的Vue项目

安装Vue

Vue中文官网
打开官网,使用npm进行安装(使用npm前需要有node的环境)
使用Vue官方提供的快速构建脚手架vue-cli

// 使用Vue官方提供的快速构建脚手架vue,这里进行全局安装
$  npm install -g vue-cli

安装完成后,进行项目的初始化

// 初始化的命令为  $ vue init webpack 项目名,如下例子
$  vue init webpack my-demo

命令开始后,会进行模板建立的信息的初步建立

在这里插入图片描述
第一项:项目名,直接确认(enter键)
第二项:项目描述,也是确认
第三项:作者信息,可以自行设定
第四项:会有选项,选择第一项 standalone
第五项:vue-router插件,具体请看vue-router官网,这里作者因为项目需要,所以选择了yes(Y)
第六项:ESLint,一种代码规范和错误检查工具,能够帮助我们的vue项目有一个统一的代码风格,这里选择Y
第七项:在上一项选择Y后,有安装选择项,选择Standard
第八项:单元测试,作者目前项目不需要,所以选择N
第九项:好像也是测试,也是选择N
最后一项:选择安装工具,可以使用node提供的npm,也可以使用Yarn,Yarn具体官网,因为之前安装了node,所以这里使用npm,确认后等待项目的初始化完成
在这里插入图片描述
初始化完成

猜你喜欢

转载自blog.csdn.net/zz_ch/article/details/84871306