Vue-Cli4基础配置及目录简介

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模块基本信息，项目开发所需要模块，版本，项目名称