准备
–
技术栈
- Html+css+javascript
- webpack
- ES6基本语法
- Vue
- vue-router 路由
- axios 网络请求
- Vuex 状态管理
- scss css预编译
安装
1、安装vue
npm install vue -g
2、安装vue-cli脚手架
npm install --global vue-cli
项目初始化
1、初始项目
使用vue-cli脚手架工具初始化一个vue项目:
vue init webpack my-object
cd my-boject
npm install
npm run dev
项目目录如图:
build //最终发布的代码存放的位置
config //配置目录,包括端口号等
node_modules //npm加载的项目依赖模块
src //这里是我们要开发的目录,基本上要做的事情都在这个目录里。
static //静态资源目录,如图片、字体等。
package.json //项目配置文件,这个用于控制项目的依赖。使用npm加载依赖时,会按照这个文件里面描述的各个依赖模块的版本进行查找,先查找node_modules目录下是否已存在某个依赖,若不存在再去网络下载,但是不会查找本地缓存中已经下载好的。
index.html //项目的入口
static/.gitkeep //这个文件保证这个文件夹在上传到github的时候会始终存在。因为github本身会忽略掉空文件夹。
.babelrc // babel语法编译器的编译配置
.editorconfig //编辑器的配置
.eslintignore //忽略语法检查的目录
.eslintrc.js //eslint的配置文件
.gitignore //一些不需要上传的文件或者目录
README.md //项目的描述文件
我们最需要关注的,就是src里面的内容
asset //放置一些图片
components //组件目录,用于放置一些组件
router //路由文件
App.vue //项目入口文件,可以将组件都写在里面
main.js //项目的核心文件
初始文件展示
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<