使用Vue-cli脚手架快速搭建Vue项目框架

vue-cli也就是脚手架,用于快速地搭建项目地框架

安装Vue-cli

使用以下任意命令全局安装

npm install -g @vue/cli
# OR
cnpm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后可以查看版本

 vue --version
 #or
 vue -V

如果有版本显示出来说明安装成功了
在这里插入图片描述

创建项目

安装成功之后,可以用vue-cli快速创建项目

vue create my-project

my-project是项目名称

使用Vue-cli脚手架快速搭建Vue项目框架_第1张图片
然后下面是选择配置,我这里是有我自己保存的配置,第一次用的话可以选择最后一个选项 Manually select features 来配置需要的一些功能。

使用Vue-cli脚手架快速搭建Vue项目框架_第2张图片
注意这里要按空格键来选择或取消,我们这里选择这几项常用的配置

使用Vue-cli脚手架快速搭建Vue项目框架_第3张图片
选了之后按回车继续,选择vue版本,我选了2.x

在这里插入图片描述
下面选择路由模式,选是表示使用history路由,否就是hash路由,我选是。

在这里插入图片描述
再下面选择css预编译,我用的是less

使用Vue-cli脚手架快速搭建Vue项目框架_第4张图片
配置文件存放方式,存在单独文件夹或package.json里,我选单独文件

使用Vue-cli脚手架快速搭建Vue项目框架_第5张图片

是否保存配置,保存的话要取个名字

使用Vue-cli脚手架快速搭建Vue项目框架_第6张图片

然后就等待项目下载配置完毕

使用Vue-cli脚手架快速搭建Vue项目框架_第7张图片
安装完之后,项目结构是这样的,用指令运行一下

npm run serve

使用Vue-cli脚手架快速搭建Vue项目框架_第8张图片

使用Vue-cli脚手架快速搭建Vue项目框架_第9张图片
显示效果如上就说明安装成功了

你可能感兴趣的:(vue)