vue-cli 脚手架搭建前端 vue 项目详细过程

使用vue-cli 搭建 vue 项目，完整过程~~~~~~~~~~~~~~~~

工具/原料

命令行工具：cmder（选择自己喜欢的）

一、搭建项目前的基础学习

① 命令

在使用命令行工具之前，先学习如何使用，基本的命令代表什么

 -g            是 --global 的简写

 -v            是 --version 的简写

 -S            是 --save 的简写

 -D            是 --dev 的简写

cd  xxx     代表进入到本地（电脑）xxx 文件夹中

② 包管理器

包管理器很多

npm

yarn

cnpm

pnpm

等等，选择安装

这里我们使用的是 yarn

③ 全局安装 vue-cli

npm install vue-cli -g

先把脚手架安装上，

查看是否安装成功 

vue -V

查看到版本的话就是安装成功了

二、开始搭建项目

① 进入到自己想要放置项目的位置

cd 进入到对应的文件夹

② 初始化项目

vue init webpack  projectname

④ cd 进入项目

cd  projectname

⑤ 安装依赖

yarn

⑥ 运行项目

yarn run  dev

浏览器打开对应地址，就搭建成功了

⑦ 项目结构

下图是项目结构树解析

二、安装其他插件

vue-cli 搭建的项目，只是一个项目框架，什么插件多没有，所有的插件都需要自己去安装

① 安装 状态管理器 vuex

如果需要使用到状态管理器的话，就安装状态管理器

yarn add vuex

② 安装 ui 组件

$ cnpm iinstall element-ui --save # 下载饿了么 ui 框架，这个框架是 PC 端的

$ cnpm install iview --save # 下载 iview 这个 ui 框架，框架都是选择的，选择其一即可。

选择适合自己的 UI 组件安装使用

③ 安装 http 请求插件

http 插件很多，这里我们选择 axios

yarn add axios

注意事项

学无止境~~~~~~~~~~~~~~~~~~~