Vue-Cli4基础配置
vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。它是轻量级的,它有很多独立的功能或库。
初始环境配置
Vue
安装需下载node.js
Vue
提供了一个CLI
,为单页面应用 (SPA) 快速搭建繁杂的脚手架。配置过程大致总结如下:
打开终端:
- 安装
node.js
,安装完node.js之后,npm也会自动安装。查询是否安装成功的命令:node -v
npm -v
- 使用
npm
安装一般比较慢,故安装cnpm
淘宝镜像来替换npm
- 全局安装脚手架工具
vue-cli
,命令如下:npm install --global @vue-cli
- 使用
vue create project-name
创建项目 - 选择
Manually select features
自定义配置(若半天还不行就卸载cnpm
使用npm uninstall cnpm -g
命令 - 选择
In package.json
存放到package.json
中,这样项目结构比较简单 - 不选择
history
模式(选择no),可以方便未来服务器的配置 - 进入终端,运行项目:
npm run serve
- 使用
npm --save install axios
安装axios
目录简介
├── README.md
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── img
│ │ └── logo.png
│ ├── components
│ │ └──Helloworld.vue
│ ├── views
│ │ └── Home.vue
│ ├── main.js
│ ├── router // 路由配置文件
│ │ └── router.js
│ └── store
│ └──store.js
└── babel.config.js
└── package.json
- public存放静态文件
- public/index.html生成项目的入口文件,webpack打包的js,css也会自动注入到该页面中
- src存放各种vue文件的地方
- src/assets用于存放各种静态文件,如图片,css
- src/compnents用于存放我们的公共组件
- src/views用于存放我们写好的各种页面
- src/App.vue主vue组件 引入其他组件,app.vue是项目的主组件,所有页面都是在app.vue下切换的
- src/main.js入口文件,作用是初始化vue实例,也可以在此文件中引用组件库或者全局变量
- src/router.js路由文件,是为各个页面的地址路径
- src/store.js状态文件
- package.json模块基本信息,项目开发所需要模块,版本,项目名称