【小白懂系列】Vue CLi脚手架创建第一个VUE项目

1、VSCode创建项目

• 先选择一个项目路径，通过终端命令行进入：
• 进入命令行，进入项目根目录，打包创建项目

vue init webpack 项目名

• 接下来命令行将进入用户交互模式：

2、运行CLI脚手架项目

• 在​​1​​中已经创建好了项目hello，通过终端命令进入项目目录
• 通过命令​​npm start​​ 开始运行项目

• 项目运行成功截图

3、vue cli脚手架文件目录结构

• ​​vue​​项目的开发方式：

4、如何开发Vue脚手架

• ​​在vue中的开发一切皆组件​​

5、在脚手架中使用axios

安装–导入–配置

• 直接安装！

npm install axios --save-dev

• 在​​main.js​​​中引入​​axios​​。

import axios from 'axios'

• 修改内部的异步

Vue.prototype.$http=axios;//修改内部的异步

5.1使用axios

在需要发送异步请求的位置：

​​this.$http.get("url").then((res)=>{})​​

​​this.$http.post("url").then((res)=>{})​​

6、Vue Cli打包部署项目

• 在项目根目录下执行如下命令

npm run build

• 项目打包之后会生成一个新的目录叫​​dist​​，将这个目录文件直接放到后端项目的服务器上执行即可。这个目录文件又叫生产目录。
• 项目通过​​脚手架​​​打包之后，在拷贝到后端项目的​​static​​​静态文件目录下，并对​​index.html​​文件作出如下修改

修改：

通过项目访问路径

​​http://localhost:8989/vue/dist/index.html​​