【小白懂系列】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
