VUE学习(十二)、vue脚手架的使用

VUE学习(十二)、vue脚手架的使用

一、安装vue-cli

1、配置淘宝镜像

配置淘宝镜像防止有时候安装脚手架网络卡顿

npm config set registry https://registry.npm.taobao.org

2、全局安装@vue/cli

npm install -g @vue/cli

3、创建一个项目

vue create hello-world

(vue版本、语法转换、语法检查）

4、启动项目

npm run serve

访问生成地址即可

5、也可使用vue ui命令实现可视化创建

6、main.js文件

/* 
  该文件是整个项目的入口文件
*/
// 引入vue，此处引入的是一个残缺版本的vue，要引入原生的如下："vue/dist/vue.js"
import Vue from "vue";
// 引入App组件，它是所有组件的父组件
import App from "./App.vue";
// 关闭vue生产提示
Vue.config.productionTip = false;

// 创建Vue实例对象----vm
new Vue({
    el: "#app",
    // 使用残缺版是因为 vue 中三分之一都是模板解析器，但是当项目打包以后不再需要模板解析，所以进行精简
    // 将App组件放入容器中,当使用残缺版本的vue.js时必须用render，否则不能解析模板
    // render: (h) => h(App),
    // render原生写法
    render: function (createElement) {
        // createElement类型为一个函数
        console.log(typeof createElement);
        //return createElement("h1", "你好啊");
        return createElement(App);
    }
    // -----------------简写演变-----------
    /* 

    // 去除定义方法关键字
    render(createElement) {
      return createElement(App)
    }
    // 写成箭头函数
    render:(createElement) =>{
      return createElement(App)
    }
    // 去除箭头函数括号
    render:createElement =>{
      return createElement(App)
    }
    // 箭头函数只有一句函数体且有返回值
    render:createElement => createElement(App)
    
    */
}); //.$mount("#app");

/*

关于不同版本的Vue：

​ 1.vue.js与vue.runtime.xxx.js的区别：

​ (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。

​ (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

​ 2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用

​ render函数接收到的createElement函数去指定具体内容。

*/

7、默认不能更改的配置（也有更改的方法）

①、public文件夹

②、src文件夹

③、main.js文件

8、更改不能改的默认配置vue.config.js

修改（添加）vue.congfig.js配置文件后必须关闭项目重新启动

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
}

更多配置可查官网

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

关于不同版本的Vue

1. vue.js与vue.runtime.xxx.js的区别：
   1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
   2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

vue.config.js配置文件

1. 在终端使用vue inspect > output.js可以查看到Vue脚手架的默认配置（使默认配置显示在项目中，但是并不能更改–更改无效）。
2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

推荐阅读

VUE笔记文章列表

1、VUE学习(一）、基于简单js引入的Vue快速入门——简单实例使用_醉瑾_的博客-CSDN博客

2、VUE学习(二)、计算属性vs侦听属性——基于案例的对比_醉瑾_的博客-CSDN博客

3、VUE学习(三)、绑定样式——class和style_醉瑾_的博客-CSDN博客

4、VUE学习(四)、条件渲染——v-if与v-show_醉瑾_的博客-CSDN博客

5、VUE学习(五)、列表渲染之：key原理、列表过滤、列表排序_醉瑾_的博客-CSDN博客

6、VUE学习(六)、vue 监测数据改变原理_醉瑾_的博客-CSDN博客

7、VUE学习(七)、收集表单数据_醉瑾_的博客-CSDN博客

8、VUE学习(八)、过滤器_醉瑾_的博客-CSDN博客

9、VUE学习(九)、内置指令、自定义指令_醉瑾_的博客-CSDN博客

10、VUE学习(十)、生命周期_醉瑾_的博客-CSDN博客

11、VUE学习(十一)、组件——非单文件组件、单文件组件_醉瑾_的博客-CSDN博客

12、VUE学习(十二)、vue脚手架的使用_醉瑾_的博客-CSDN博客

13、VUE学习(十三)、ref属性、props配置项、minix混入、自定义插件、scoped样式_醉瑾_的博客-CSDN博客

14、VUE学习(十四)、TodoList案例（基于props实现组件间通信通）_醉瑾_的博客-CSDN博客

15、VUE学习(十五)、组件自定义事件及todoList案例自定义事件完成_醉瑾_的博客-CSDN博客

16、VUE学习(十六)、全局事件总线及TodoList案例事件总线实现_醉瑾_的博客-CSDN博客

17、VUE学习(十七)、Vue封装的过度与动画_醉瑾_的博客-CSDN博客

18、VUE学习(十八)、VUE脚手架配置代理_醉瑾_的博客-CSDN博客