关于Vue脚手架

一、简介与安装

1 简介

Vue Cli 全称Vue command line interface(Vue命令行接口)，俗称Vue脚手架，是Vue官方提供的一个标准化开发工具(开发平台)。可以帮助我们快速创建 一个开发Vue项目的标准化基础架子。【集成了webpack配置】

参考官网：Vue CLI

最新版本是4.x，目前处于维护模式

其优点

复制代码

1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化的webpack配置

2 安装脚手架

第一步 ：验证npm指令是否存在

复制代码

如果不存在，需要安装nodejs软件

官网：https://nodejs.org/en

第二步：更换镜像

复制代码

npm config set registry https://registry.npmmirror.com

or 

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

扩展：

查看是否更换成功： npm config get registry

删除最新镜像： npm config delete registry

第三步：安装脚手架(全局安装，只需要安装一次)

复制代码

npm install -g @vue/cli

# OR

yarn global add @vue/cli

**第四步：**测试是否安装成功，检查一下版本号

复制代码
vue -V
或者
vue --version

二、Vue项目创建与解析

1 如何创建Vue项目

第一步: 选择项目要创建的位置

复制代码

比如在D:盘的一个文件夹projects里，那么cmd当前位置，需要切入该文件夹里

第二步：创建项目，想好自己的项目名称，比如first_vue

第三步: 按照提示来

错误总结

第一个：java_home

第二个：Error: spawn yarn ENOENT

打开 C盘，在 C盘里，打开 users （用户名）的文件夹，然后在右侧搜索名为 .vuerc 的文件

复制代码

{
  "useTaobaoRegistry": false,
  "packageManager": "npm"
}

2 项目相关指令

复制代码

启动项目：npm run serve
暂停项目：Ctril+C

3 脚手架组织结构解析

脚手架文件结构：

复制代码

.文件目录
├── node_modules:  vue库文件以及第三方库文件 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── components: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件 ，可以自行参考babel官网
├── package-lock.json: 包版本控制文件 
├── package.json: 应用包配置文件
└── README.md: 应用描述文件

三、入门案例

src/components/School1.vue

复制代码

<template>
    <ul class="schoolUl">
        <li>学校名称：{{schoolName1}}</li>
        <ul>
            <li>学校地址：{{schoolAddress1}}</li>
        </ul>
    </ul>
</template>

<script>
    export default {
        name:"School1",
        data(){
            return {
                schoolName1:"吉林大学",
                schoolAddress1:"高新区前进大街2699号"
            }
        }
    }
</script>

<style>
    .schoolUl{
        list-style-type:lower-alpha;
    }
</style>

src/components/School2.vue:

复制代码

<template>
    <ul class="schoolUl">
        <li>学校名称：{{schoolName2}}</li>
        <ul>
            <li>学校地址：{{schoolAddress2}}</li>
        </ul>
    </ul>
</template>

<script>
    export default {
        name:"School2",
        data(){
            return {
                schoolName2:"北京大学",
                schoolAddress2:"海淀区颐和园路5号"
            }
        }
    }
</script>

<style>
    .schoolUl{
        list-style-type:lower-alpha;
    }
</style>

src\components\City.vue:

<template>

<ul>

<li>{{cityName1}}

<School1></School1>

</li>

<li>{{cityName2}}

<School2></School2>

</li>

</ul>

</template>

<script>

import School1 from './School1.vue'

import School2 from './School2.vue';

export default {

name:"City",

data(){

return {

cityName1:"长春市",

cityName2:"北京市"

}

},

components:{

School1,

School2

}

}

</script>

<style>

</style>

src/App.vue

复制代码

<template>
  <div id="app">
      <City></City>
  </div>
</template>

<script>
import City from './components/City.vue'

export default {
  name: 'App',
  components: {
    City
  }
}
</script>

<style>
</style>

src/main.js:

复制代码

/*
 该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
//引入App组件，他是所有组件的父组件
import App from './App.vue'

//关闭vue的生产提示
//Vue.config.productionTip = false

new Vue({
   // 简写形式     将App组件放入容器中
    render: h => h(App),
   // 完整形式
    // render(createElement){
    //     return createElement(App)
    // }
   
}).$mount('#app')

public/index.html:

复制代码

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 开启移动端的理想端口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 配置页签图标 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <!-- 配置网页标题 -->
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
            <!-- 当浏览器不支持js时，里面的元素内容就被渲染 -->  
         <noscript>
            <strong>We're sorry but 
               <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
                  enabled. Please enable it to continue.</strong>
            </noscript>
        <!-- 容器 -->
        <div id="app"></div>
    </body>
</html>

小贴士：常用快捷键：控制台打开的快捷键： ctrl+`

四、render函数

按照以前的写法，我们应该这样写:

复制代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
   el:"#app"
   template: `<App></App>`
});

但是会报如下错误：

因为vue项目，默认引用的是node_modules\vue\dist\vue.runtime.esm.js，在node_modules\vue\package.json中明晃晃的写着：模块化语法时，引用的是该js

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

复制代码

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

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

复制代码

render(a){
    //console.log(typeof a) // Function, 该函数就是用来创建DOM节点的
    return a('h1','你好，欢迎来到我的家');
}
//简写：
render:h => h(h1)

自己定义一个用于创建节点的函数，你应该会这么定义：

复制代码

function createNode(nodeName,content){
   var node = document.createElement(nodeName);
   var txt = document.createTextNode(content)
   node.appendChild(txt)
   return node;
}

五、配置文件

vue.config.js 是一个可选的配置文件，如果项目的（和package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载

使用vue.config.js 可以对脚手架进行个性化定制，详见配置参考官网：配置参考 | Vue CLI

复制代码

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