Vue CLI 4

1 基础

1 CLI 用于单页面应用
	1 MPA 多页面应用程序 -- 有多个 html 文件
    2 SPA 单页面应用程序 -- 一个项目自有一个 html文件 
       
2 关闭ESLint检查  //注意配置文件的修改, 重启项目生效
    1 vue.config.js -> module.exports = {
    
    lintOnSave: false}

3 知识点: 
  1 CLI, @ 路径表示 src

2 搭建项目

1 安装包:  
  npm install -g @vue/cli   // vue -V
  
2 生成项目: 
  vue create myapp
  
3 安装过程的配置选择
-----------------------------------------------------------------------------------


-----------------------------------------------------------------------------------

4 进入项目: cd app 
5 启动项目: npm run serve

3 项目文件说明

    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   项目说明文档

4 常见 ESlint 常见规范

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

5 简单的理解描述

1 创建单文件组件: HTML结构 + style样式 + export default {
    
    }组件配置项

2 单文件组件 / 根组件 / 路由配置文件 --> 引入 + 注册 + 使用

3 文件详情
  1 App.vue -- 整个项目根组件
	1 HTML结构 + style样式
	2 export default {
    
     }  -- 所有的组件会在这个根组件这里组合展示
	3 这个文件会在 main.js 中被导入 -- 并挂载到 index.html 中的 <div id="app">4 根组件渲染组件可以根据路由的方式 -- 当然也可以通过注册的方式 -- 动态组件也是可以的
	5 组件切换的功能 -- 可以写死在这里 -- 也可以通过其他组件导入到这里

  2 main.js -- 整个项目入口文件
	1 加载 vue 和 App.vue 和 router.js + 其他需要的模块
	2 Vue.config.productionTip = false  -- 打包项目相关
	3 创建 Vue实例 -- 把App组件渲染到 id=="app"DOM节点上
	  1 router,  -- 路由注册
	  2 render: h => h(App), -- 相当于导入 App的 <template><div> 内容 </div></template> 到vue实例上
	  3 el: "#app"  -- 挂载到 app节点上

  3 index.js -- 路由配置文件
      1 加载 vue 和 vue-router  + 需要的单文件组件 -- 导出的配置对象
      2 使用路由模块 -- Vue.use(VueRouter)  
      3 创建路由对象 -- const router = new VueRouter({
    
     mode: 'history', routes}) -- routes==映射表对象
      4 导出路由对象 -- export default router  
      5 映射表数组对象  
        1 同步配置 {
    
     path: '/', name: 'Home', component: 加载的单文件组件}
        2 异步配置 {
    
     path: '/', name: 'Home', component: () => import( './xx/xx.vue')}
        //也就是路由懒加载, 只需要的时候引入就 OK

猜你喜欢

转载自blog.csdn.net/weixin_46178697/article/details/113991632

相关文章