Vue CLI 4

1 简单描述

1 作用: 用于快速搭建一个基于 Vue 的项目

2 相关了解: 
------------------------------------------------------------------------------------
  1 基础常识: 
	1 CLI 通常用于单页面应用  //就是一个项目只有一个 html文件
    2 CLI 中 -> @ 表示路径 src
    3 基础的单文件组件: HTML结构 + style样式 + export default {}组件配置项

  2 常见 ESlint 常见规范: 
  	1 语句末尾不加分号，如 var abc = 123
  	2 函数小括号前后加空格，如 function test () {}
  	3 属性冒号后面加空格，如 {msg: 'hello'}
  	4 文件末尾要添加一个新空行
  	5 不能有连续2个以上的空行
  	6 单行注释的双斜杆后面加空格，如 // 这里是注释
  	7 等号前后加空格，如 var abc = 123 
  	8 变量或引入，必须有引用   就是声明变量不用 == 报错
------------------------------------------------------------------------------------

2 新建项目

1 安装 CLI
  1 检查是否安装: vue -V
  2 npm 安装: npm install -g @vue/cli

2 创建项目
-----------------------------------------------------------------------------------
1 vue create myapp  //定义项目名称

2 default(基础) / Manually (手动选择)  //选择创建项目的方式

3 手动配置项选择  //空格勾选, 上下选择, 回车确认
    (*) Choose Vue version   //选择 Vue 版本的 -> 2.x / 3.x
	(*) Babel
	( ) TypeScript    // TS
	( ) Progressive Web App (PWA) Support   //先进的 APP, 还没有完全被推广起来
	(*) Router 
	(*) Vuex 
	(*) CSS Pre-processors   //css预处理器
	(*) Linter / Formatter   //ESLint 代码规范
	( ) Unit Testing      //端到端测试
	( ) E2E Testing      //测试

4 选择eslint默认配置
    ESLint with error prevention only
    ESLint + Airbnb config
    ESLint + Standard config    (标准配置)
    ESLint + Prettier

5 选择什么时候进行eslint语法检查
    (*) Lint on save     保存的时候--常用
    ( ) Lint and fix on commit    提交的时候, 不科学

6 选择配置的保存方式: //脚手架搭出来的项目, 所涉及配置文件的存放位置
	In dedicated config files    把所有的配置文件单独保存成一个文件 (方便修改配置)
    In package.json      全部放到 package.json 文件里面 (这个展示起来舒服简单)   选哪个都可以

7 ? Save this as a preset for future projects? (y/N)  N  //是否保存此次配置

8 dart-sass 和 node-sass 的区别
  1 dart-sass: 性能好, 自动实时编译的, 也是官方使用的 (推介使用这个)
  2 node-sass: 需要保存后生效, 因为国情问题经常装不上
-----------------------------------------------------------------------------------

3 项目文件说明

1 基础篇 🔶
-------------------------------------------------------------------------------------------
    01 node_modules   项目依赖模块 (npm包)的存放位置
    02 public   公共资源 -- 服务器目录
         index.html   项目主页面
         
    03 src   开发代码
         assets     放置一些项目用到的资源 -- 图片, 音频, css重置样式表, js配置文件 ...
         components     通常用来放置一些公共的复用的组件
         App.vue     项目根组件
         main.js     入口文件
         
    04 .editorconfig   编辑器设置, 代码风格
    05 .browserslistrc   设置要兼容哪一部分浏览器 
    06 .eslintrc   帮助我们规范代码; 刚开始使用特别恶心, 报错非常多, 你不按我的来就报错
    07 .gitignore   GIT 忽略列表 
    08 babel.config.js   对 babel 的一个配置, 很少改的
    09 package-lock.json   会具体到每个版本号
    10 package.json   描述了项目依赖的 npm 包
    11 README.md   项目说明文档
-------------------------------------------------------------------------------------------

2 App.vue 🔶  //整个项目的根组件
-----------------------------------------------------------------------------------------
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>
-----------------------------------------------------------------------------------------

3 main.js 🔶   //整个项目的入口文件
-----------------------------------------------------------------------------------------
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false   //打包项目相关

import router from './router'  //路由
import store from './store'   //Vuex

//全局挂载 -- api
import http1 from '@/utils/api.js'
Vue.prototype.$http = http1

// 全局挂载 -- img路径管理
import img from '@/utils/img.js'
Vue.prototype.$img = img

new Vue({   //创建 Vue实例 -- 把App组件渲染到 id=="app" 的DOM节点上
  store,
  router,
  render: h => h(App),
}).$mount('#app')
-----------------------------------------------------------------------------------------


4 index.js 🔶  //路由配置文件
-----------------------------------------------------------------------------------------
  import Vue from 'vue'
  import VueRouter from 'vue-router'

  Vue.use(VueRouter)   //在 Vue中注册路由

  import Home from './views/home/index.vue'   //需要注册的组件

  const routes =  [  //配置路由映射表
    {path: '/home', alias: '/',components: {alive: Home}},
    {path: '/user', component: () => import('@/views/user/index.vue')}  //路由懒加载
  ]

  const router = new VueRouter({  //创建路由对象
    mode: 'history',
    routes
  })
  
  export default router
-----------------------------------------------------------------------------------------