Vue.cli(脚手架)安装

Vue-cli 它能把后缀为.vue的文件翻译成浏览器可以识别的内容。可以自动刷新浏览器，自动压缩代码，自动把js翻译成低版本的js，可以作为代理服务器等等...是一个功能强大的工具。

Vue-Cli安装

官网
安装

安装方法:
1.win+r打开小黑窗运行输入cmd打开终端
4.输入npm install -g @vue/cli(任意路径都行，需要安装node环境)

安装成功.png

安装失败.png

解决方案:
1.更换网络环境
2.更换安装工具
cnpm：cnpm install -g @vue/cli
yarn :yarn global add @vue/cli

命令查看是否成功
终端输入vue --version出现版本号就是安装成功了

Vue-cli项目创建

传送门

正常流程:
终端输入:vue create 项目名
注意:
1.创建之后会多一个项目文件夹，路径不要乱选 。
2.项目名不能有中文，不能有大写字母。

对话框.png

提示.png

5.进入项目文件夹
cd 项目名也可以根据上面蓝色字的提示

6.运行项目:
npm run serve

效果.png

项目结构.png

Vue-cli项目编码位置:

1.组件的逻辑直接写在src下的components里 文件名.vue 用一个文件能够包含组件的所有内容

//输入scaffold就能够自动生成
<template>
  <!-- 模板 结构 -->
</template>

<script>
// 逻辑
export default {
  // 组件的属性
  methods: {
    
  },
  data(){}
  // 。。。
}
</script>

<style>
/* 样式 */

</style>

2.静态资源放到src下的assets文件夹下，直接使用对应的路径即可引用。
3.css也是放在assets这个文件夹中，引入方式：
1.style标签中引入

  /* 使用css支持的语法导入 */
  /* @import url('./assets/base.css'); */

2.main.js中引用

// 导入 样式
import './assets/base.css'

Vue-cli src代码结构

1.main.js中
1.创建了最外层的Vue实例
2.把App.vue这个组件当做Vue实例内部的最顶级组件并渲染出来。
3.和piblic/index.html中的那个id为app的div关联起来
4.App.vue最顶级的那个组件，仅次于Vue实例
5.assets静态资源文件夹
6.components组件文件夹，除了App.vue之外的组件，都写到这个文件夹中即可。

工作中的拆分:

1.新建的与components平级的文件夹
1.1.新建views文件夹-用于放置页面级别的组件(铺满一页的组件)。
1.2原来的components则放置功能类的组件
2.新建router文件夹
2.1把router相关都从main.js中抽取出去，使用export default router暴露出去 在main.js中 导入
import router from './router/router'
3.新建api文件夹
3.1在文件夹中建立一个api.js或'http.js'用于放置从main.js中抽取出来的axios相关。
3.2使用根据ES6的模块化语法导入，导出。