Vue脚手架安装

---

Vue脚手架安装

1.Node.js 切换下载源

基于 node.js 的一款服务器软件 安装时需要使用 node 自带的 npm 工具
npm 一款下载软件，可以下载安装 node 平台上的各种软件
npm 默认从国外的网址下载软件，切换下载源到 中国的 淘宝源
命令查看当前下载源

npm config get registry

切换国内源

npm config set registry https://registry.npm.taobao.org/

2.创建Express 项目包

快捷打开命令行到指定目录：在指定目录的地址栏 用cmd 替换原有地址栏 然后回车
创建服务器文件夹，然后命令行服务器文件夹目录打开
初始化命令

npm init  -y

安装express模块

npm I  express

3.脚手架安装：

脚手架软件 全局安装命令：

npm I –g @vue/cli  --force

@vue/cli : vue 脚手架软件的名字
验证是否安装成功：

vue  -V

4.用脚手架生成项目包

创建项目:(在哪个目录下执行，就在哪里生成)

vue create 项目名(项目名不允许大写字母)

注意： 项目目录下不能有同名文件夹否则失败; 文件夹中不能有叫vue.js的文件否则 同名会执行错误

5.配置项：键盘方向键移动 回车确定

手动配置：

①按照下图进行勾选，操作方式：空格选中 方向键移动，回车确认

②选择vue版本

③路由选项: 直接回车

④是否用sass

⑤所有配置文件是否一起防止：直接回车

⑥是否保存上方所有配置，以后直接用：y保存 n不保存 随便选
选y则下一步需要自己随便输入个名字

⑦等待下载完毕即可

6.启动项目包

脚手架生成的项目包 自带服务器
在项目包目录下：vue-pro目录下，运行命令：npm run serve

VScode 插件

7.axios安装

Vue 推荐使用 Axios 第三方请求模块，此模块利用Promise 实现Ajax封装，没有回调地狱问题
需要安装，在项目目录下执行：

npm I axios vue-axios

检查是否安装：到项目包 node_modules 目录下 查看是否有 axios 和vue-axios文件夹即可

总结:项目包创建过程：

脚手架：一类软件的总称：可以快速下结构完整的项目包，程序员在这项目包中进行开发:
vue脚手架：npm I –g @vue/cli --force
node 版本：12到16版本 切换中国镜像
通过脚手架生成项目包：vue create 包名
不允许大写字母：创建目录下不允许重名
安装网络模块：axios
特点：用Promise 特性 封装而成 规避了 回调地狱风险
安装 npm I axios vue-axios
创建: vue create vue-pro
安装axios: npm i axios vue-axios
启动: npm run serve
轮播图:npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save