Vue（Vue脚手架）

一、使用Vue脚手架（Vue Cli）

Vue官方提供脚手架平台选择最新版本：

• 可以相加兼容的标准化开发工具（开发平台）

• 禁止：最新的开发技术版本和比较旧版本的开发平台

 Vue CLI️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/

• c：cmmand

• l：line

• i：interface

• 命令行接口工具 

1. 下载安装

•  在cmd中查看vue是否存在cli

•  全局安装（仅第一次）：

  • 配置npm为淘宝镜像

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

  • 安装：(安装过程中卡顿敲回车继续)

    • npm install -g @vue/cli

 

 2. 切换到要创建的目录

创建一个项目：vue creat name

执行之后询问执行哪个技术版本

• babel：ES6 ==> ES5
• eslint:js语法检查

选择好之后执行就会配置Webpack配置文件（脚手架环境）

3. 运行脚手架环境的vue文件

npm run serve ：然后就可以看到项目：会开启内置小服务器

 

 

二、分析脚手架 ：文件

脚手架工程停止：直接在服务端ctrl+c

 babel.config.js: babel控制文件：直接使用官方书写

 package-lock.json:包版本控制文件 

package.json: 符合npm就会存在包的说明书（依赖，名字，还有常用命令）

README.md： 对整个工程的描述，说明

Src：（打开调试工具并根据执行npm run serve执行过程进行分析）

• main,js ：引入Vue和组件（创建Vue实例）=入口文件

/* 
该文件是整个项目的入口文件
*/
//自动引入vue(完整版vue)
import Vue from 'vue'
// 自动引入App组件：所有组件的父组件
import App from './App.vue'
// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象：vm
new Vue({
  // 也可以写成el方式：
  el: "#app",
  // 后面了解：完成：将App组件放入容器中功能
  render: h => h(App),
})
// .$mount('#app')这里将脚手架方式的模板连接转为el方式

• APP组件：可以查看路径下的引入路径

  • assets：静态资源存放位置：png，视频

  • 大驼峰引入组件

public:

• 图标

• html：整个应用界面        

三、main.js中的render配置项 

如果直接使用自己的方式：（模板解析和引入组件）会报错

template:`
你好
`
components:{App}

表示正在使用一个运行版本的Vue（vue.runtime.esm.js），模板解析器没有成功获取到

解决：

1. 使用引入完整Vue

2. 使用render配置（解决不完Vue的方式）：将上面自己的方式交给render

//render函数  
render(creatElement) {
    //必须使用返回值
    return  creatElement('h1','你好啊')
  }
//由于render没有使用this，呢么就可以使用箭头函数
render:creatElement => return  creatElement('h1','你好啊')
//用一个简单的此替换creatElement
render:q=> return  q('h1','你好啊')
//最后形成

render: h => h('app')

总结: 

vue.js和vue.runtime.xxx.js的区别：

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

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

因为.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数收到的creatElement函数去指定具体内容       

 四：脚手架默认配置

 main入口文件改为其他名字：然后就无法工作

vue脚手架默认配置整理成js文件查看：vue indpect > output.js（里面默认配置不可以修改）

如果采用默认配置脚手架不可更改部分：

• public：ico，index

• src

• main

配置参考 | Vue CLI️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/config/

网页中出现的配置参考都可以修改：例如vue.config.js文件可以更改vue的入口

语法检查关闭：lintOnSave

配置参考 | Vue CLI️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/config/#lintonsave

• 停止项目 

• 在main文件中添加lintOnSave配置：

• lintOnSave：false//关闭语法检查