vue、vue-cli脚手架搭建学习笔记

超、凢脫俗 2023-10-10 11:16 66阅读 0赞

#### 文章目录 ####

*  Vue前端框架
 *   *  一、Vue入门
     *   *  1、学习vue的前置知识
         *  2、什么是Vue？
         *  3、Vue的特点
         *  4、Vue的开发工具
         *  5、Vue使用步骤
         *  6、Vue实例（页面动态添加数据）
     *  补充！ES6部分知识！
     *  二、Vue介绍：挂载+模板+指令+对象
     *   *  1、Vue挂载
         *   *  ①通过\`el\`进行代码片段的挂载
             *  ②通过Vue实例的对象进行挂载，\*vm.$mount("css选择器");\*
         *  2、Vue模板
         *   *  A、什么是vue的模板？
             *   *  ①模板写到页面上面
                 *  ②模板写到\*template\*里面
                 *  ③模板写到\*render()\*里面，很少用
             *  B、vue模板里面写什么东西？
             *   *  ①静态页面标签
                 *  ②插入的值
                 *  ③指令
         *  3、Vue指令
         *   *  v-html：绑定dom元素的innerHtml，可以向页面插入html代码。
             *  v-bind：绑定属性后，可以对属性的内部值进行修改。
             *  v-model：语法糖，双向数据绑定。
             *  v-on：绑定事件
             *  v-if、v-else、v-if-else：判断元素是否进行渲染
             *  v-show：判断元素是否进行显示，与v-if相比没有else的选项。
             *  v-for：循环生成元素
         *  4、代码环境
         *  5、对象——new Vue实例
         *   *  ①data：Vue数据配置，对象或函数
             *  ②props：数组或对象，用于\*接收父组件的数据（过程不可逆）\*
             *  ③propsData：\{ \[key: string\]: any \}，用于props数据测试
             *  ④computed：计算属性\{ \[key: string\]: Function | \{ get: Function, set: Function \} \}
             *  ⑤methods：函数or事件，\{ \[key: string\]: Function \}
             *  计算属性和函数的区别？？？
     *  补充！ES6模块化
     *  三、Vue组件概念
     *   *  0、模块化开发工程目录结构
         *  1、定义组件（具有特定功能的组件）
         *   *  ①定义组件
             *  ②\*\*UserInfo.js\*\*导出组件
             *  ③App.js导入组件
         *  2、注册组件并使用（全局或局部注册）
         *   *  ①全局注册
             *  ②局部注册
             *  ③组件的使用
         *  3、渲染组件
         *  4、组件命名方式★
         *  5、组件声明周期
     *  四、Vue-Cli脚手架
     *   *  1、什么是vue脚手架
         *  2、nodejs和npm安装和配置
         *   *  ①安装node
             *  ②配置npm源地址
         *  3、安装vue-cli
         *  4、vue-cli的使用
         *   *  ①在终端中进入某个目录
             *  ②搭建工程
             *  ③vue-cli目录结构
             *  ④vue-cli打包编译
             *  ⑤vue-cli服务端运行
             *  注！其他npm命令
             *  ①在终端中进入某个目录
             *  ②搭建工程
             *  ③vue-cli目录结构
             *  ④vue-cli打包编译
             *  ⑤vue-cli服务端运行
             *  注！其他npm命令

## Vue前端框架 ##

### 一、Vue入门 ###

#### 1、学习vue的前置知识 ####

html、CSS、Javascript、ajax（网络通信）、webpack、包管理器、ES6+。

#### 2、什么是Vue？ ####

vue读作：weiU。vue是一个前端开发框架，用于降低UI的复杂度。vue可以使用在网页、移动端等具备UI的地方。

UI：user interface，用户界面。

#### 3、Vue的特点 ####

*  渐进式
    
    一个页面的部分可以使用vue替换其他不变，vue与其他技术的兼容性很强。
 *  响应式
    
    vue数据的变化页面数据也会实时改变。
 *  组件化
    
    页面的每一个部分都可以使用vue作为一个组件。

#### 4、Vue的开发工具 ####

建议使用：Visual studio Code https://code.visualstudio.com/

vs Code开发常用插件：

*  Auto Rename Tag：能够自动更改结束标签。
 *  Live Server：自动搭建本地服务器
 *  Prettier-Code formatter：代码美化
 *  Vetur：vue组件格式支持
 *  vscode-icons：美化文件图标
 *  Code Runner：快速运行（需要安装nodejs http://nodejs.cn/）

nodejs是运行在服务端的javascript运行平台，速度快性能好，可以直接运行js文件或者是js代码。如果需要在vs code里面运行js代码就需要安装nodejs否则只能在浏览器上面运行不方便。

#### 5、Vue使用步骤 ####

1.  Vue官网下载vue的js文件
    
    官网指出如果用于学习可以导入js文件（**也可以访问连接，直接将vue.js内容复制出来**）
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.  实例化Vue对象
    
        <script>
            var vm = new Vue({
               
              //1、配置模板
              el: "#app", //id选择器，选择id为app的页面标签
              //2、配置数据，页面的所有数据全部在data里面存在
              data: {
               
                title: "商品管理",
              }
            });
          
        </script>
3.  页面模板
    
        
        <div id="app">
              <h1>{
             {title}}</h1>
        </div>

#### 6、Vue实例（页面动态添加数据） ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>练习</title>
      </head>
      <body>
        <div id="app">
          <h1>{
       {title}}</h1>
          <div>
            商品名称：<input v-model="newGoods.name" type="text" value="" />
            库存：<input v-model="newGoods.num" type="text" value="0" />
            
            <button @click="addGods">添加</button>
          </div>
          <ul>
            <li v-for="(item,i) in goods" :key="item.id">
              下标编号：{
       {i}} 名称：{
       {item.name}} 库存：{
       {item.num}}
            </li>
          </ul>
        </div>
      </body>
      
      <script src="vue-2.4.0.js"></script>
      
      <script>
        var vue = new Vue({
         
          //1、配置模板
          el: "#app", //id选择器，选择id为app的页面标签
          //2、配置数据，页面的所有数据全部在data里面存在
          data: {
         
            title: "商品管理",
            //新对象，添加
            newGoods: {
         
              id: "1",
              name: "默认商品名称",
              num: 13,
            },
            goods: [
              {
          id: 1, name: "iphone", num: 10 },
              {
          id: 2, name: "xiao mi", num: 20 },
              {
          id: 3, name: "hua wei", num: 5 },
            ],
          },
          //3、配置回调函数
          methods: {
         
            //button 绑定的事件
            addGods() {
         
              console.log("点击运行");
              this.goods.push({
         
                id: this.newGoods.id,  //当前vue对象中的数据
                name: this.newGoods.name,
                num: this.newGoods.num,
              });
            }
          }
        });
      </script>
    </html>

### 补充！ES6部分知识！ ###

1.  速写属性，省略复制
    
        var name = "nihao";
        var age = 23;
        
        //普通js对象，赋属性值
        var obj = {
              
          name: name,
          age: age,
        };
        //es6+的速写属性，直接声明属性与变量同名可以直接复制
        var suObj = {
              
          name,
          age,
        };
        
        console.log(obj);
        console.log(suObj);
2.  速写方法，省略function
    
        var obj = {
              
            name :"dz",
            //普通声明方法
            sayHello:function(){
              
                console.log(this.name);
            }
        }
        var suObj = {
              
            name:"dz_su",
            //速写方法,
            sayHello(){
              
                console.log(this.name);
            }
        }
        obj.sayHello();
        suObj.sayHello();
3.  箭头函数
    
    在参数()和方法体\{\}之间加上`=>`表示箭头函数，省略了function，并且箭头函数自动绑定当前的对象this，而不仅限于当前方法使用this。单行的方法体甚至能够省略\{\}。
    
        var obj = {
              
          name: "yyy",
          //速写方法
          sayHello() {
              
            //每隔一秒钟执行，普通函数function
            setInterval(function () {
              
              //this是属于function的this，不能调用到obj李里面的name
              console.log(this.name);
            }, 1000);
          },
        };
        
        var jianobj = {
              
          name: "yyy",
          sayHello() {
              
            //箭头函数：在参数与函数体之间加 =>
            //this指向obj
            setInterval(() => {
              
              console.log("Hello!" + this.name);
            }, 1000);
          },
        };
        
        //obj.sayHello(); //不能获取到name
        //jianobj.sayHello(); //ok
        //普通匿名函数
        var func1=function(a,b){
              
            return a+b;
        }
        
        //匿名函数使用箭头函数
        var func = (a, b) => {
              
          return a + b;
        };
        
        console.log(func1(4,4));
        console.log(func(3,4));
4.  模板字符串
    
    与原始的`""`双引号相比的局限性之外，模板字符串``` `` ```可以随意的换行并且也简化了字符换的拼接。通过$\{变量名\}就能获取到值。
    
        //模板字符串
        /**
         * 特点：
         * 可以随意换行，相当于加上了\n.
         * 方便字符串的拼接。${js表达式}
         */
        var val=`y
            q  
                d`;
        
        var name = "东哥";
        var age = 22;
        
        var str=`姓名：${
                name},年龄：${
                age}`
        console.log(str);
        console.log(val);
        
        //不能随意换行
        var val2="yqd";

### 二、Vue介绍：挂载+模板+指令+对象 ###

#### 1、Vue挂载 ####

1.  什么是Vue的挂载？

Vue的使用时在一个代码片段里面进行所有的数据操作。**挂载就是Vue实际控制的代码片段。**

1.  怎么进行挂载？有几种方式

##### ①通过`el`进行代码片段的挂载 #####

**使用CSS选择器**，选中需要挂载的代码片段即可。

<div id="app">
        
    </div>
    
    <script src="vue.js"></script>
    <script>
    new Vue({
        
       el:"#app",  //id选择器选中上面div，然后使用vue在这块div里面进行数据操作。 
    });    
    </script>

##### ②通过Vue实例的对象进行挂载，*vm.$mount(“css选择器”);* #####

<div id="app">
        
    </div>
    
    <script src="vue.js"></script>
    <script>
    var vm = new Vue({
        
    });    
    //Vue实例的vm（ViewModel）对象进行代码片段的挂载
    vm.$mount("#app");  //同样需要通过id选择器
    //or
    /**
     * var vm = new Vue({
     * }).$mount("#app"); 
     */
    </script>

#### 2、Vue模板 ####

##### A、什么是vue的模板？ #####

vue模板里面**写的是页面代码**。

###### ①模板写到页面上面 ######

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
          
        <div id="app">
            {
       {title}}
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        new Vue({
         
          el: "#app",          //使用el的方式进行代码片段的挂载
          data: {
                       //vue的数据。
            title: "测试标题2",
          },
        });
      </script>
    </html>

###### ②模板写到*template*里面 ######

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
           
         </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
          //页面模板
        var template = `<div id="app">
                          {
          {title}}
                        </div>`;
        new Vue({
         
          el: "#app",          //使用el的方式进行代码片段的挂载
          template: template,  //也可以直接写成速写属性
          data: {
                       //vue的数据。
            title: "测试标题",
          },
        });
      </script>
    </html>

###### ③模板写到\*render()\*里面，很少用 ######

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
            {
       {title}}
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        new Vue({
         
          el: "#app",          //使用el的方式进行代码片段的挂载
          data: {
                       //vue的数据。
            title: "测试标题2",
          },
          //此参数是一个方法参数。
          render(createElement){
         
              //创建标签<h1></h1>,后面填充内容。比不过很少这样用。虽然效率高
              return createElement("h1","this is a title!")
          }
        });
      </script>
    </html>

经上使用过，模板的优先级是：**页面模板 < template模板 < render()模板**，只要使用了后者，前者不起作用。

##### B、vue模板里面写什么东西？ #####

###### ①静态页面标签 ######

dom标签，html文档直接写

###### ②插入的值 ######

\{ \{ js表达式 \}\}，`mustache语法`

###### ③指令 ######

vue指令代码。注意，指令后面的是js代码并不是字符串。

#### 3、Vue指令 ####

##### v-html：绑定dom元素的innerHtml，可以向页面插入html代码。 #####

不使用v-html属性。只在在模板中插入html是不允许的，插入的内容也不会正常显示，因为vue为了防止网站攻击进行了编码。

**✘** 不允许的操作：

出现结果编码后，浏览器不解析：

<font style="vertical-align: inherit;"><span style ='color：red'>this is a title!</ span></font>

**√** 正确操作

<body>
        <div id="app">
            
            <h1 v-html="title">
                {
       {title}}
            </h1>
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        new Vue({
         
          el: "#app",          //使用el的方式进行代码片段的挂载
          data: {
                       //vue的数据。
              //title模板中想要插入的是一个html代码
              title: "<span style='color:red'>this is a title!</span>",
          },
        });
      </script>

##### v-bind：绑定属性后，可以对属性的内部值进行修改。 #####

v-bind的另外一种j简洁写法 `:属性 <==> v-bind:属性`

<body>
        <div id="app">
            
            
            <a :href="link">{
       {linkName}}</a>
            <br>
            
            <input v-model="link" placeholder="修改连接"><input type="button" value="修改连接">
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        new Vue({
         
          el: "#app",          //使用el的方式进行代码片段的挂载
          data: {
                       //vue的数据。
            title: "<span style='color:red'>this is a title!</span>",
            link:"https://www.baidu.com",
            linkName:"这是一个连接",
          },
        });
      </script>

##### v-model：语法糖，双向数据绑定。 #####

绑定了value属性了input文本框改变的事件 <==> v-model.

上面的示例是v-bind结合v-model完成的。

**v-model绑定的数据改变，文本框的内容改变，反之，文本框内容改变，v-model绑定数据也会改变。**

v-model糖的正确打开方式

<body>
        <div id="app">
            连接地址：<input v-model="link"  type="text">
            连接名称：<input v-model="text" type="text">
            <br>
            
            <a v-bind:href="link">{
       {text}}</a>
        </div>
    </body>
    <script src="vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
         
            el:"#app",
            data:{
         
                link:"https://www.baidu.com",
                text:"百度"
            }
        })
    </script>

v-model加盐版

<input v-model="title" type="text" />
          
          <input :value="title" @input="title=$event.target.value" type="text">

> v-model=“link”，绑定data中的link
> 
> v-model=“text”，绑定data中的text

##### v-on：绑定事件 #####

v-on的简介写法：**@** 事件名称。

<body>
        <div id="app">
            <br>
            
            
            
            <button @click="oneClick">oneClick</button>
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        new Vue({
         
          el: "#app",          //使用el的方式进行代码片段的挂载
          methods:{
         
              oneClick(){
         
                console.log("oneClick()");
              },
          }
        });
      </script>

##### v-if、v-else、v-if-else：判断元素是否进行渲染 #####

<body>
        <div id="app">
          
          <h1 v-if="status === 1">status==1</h1>
          <h1 v-else-if="status === 0">渲染status == 0</h1>
          <h1 v-else="status === -1">status == -1</h1>
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        var vm = new Vue({
         
          el: "#app", //使用el的方式进行代码片段的挂载
          data: {
         //vue的数据。
            status: 0, 
          },
        });
      </script>

##### v-show：判断元素是否进行显示，与v-if相比没有else的选项。 #####

<body>
        <div id="app">
            
            <a v-show="status === 0" href="https://www.baodu.com/">跳转百度的连接是否显示</a>
        </div>
    </body>
    <script src="vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
         
            el: "#app", //使用el的方式进行代码片段的挂载
            data: {
         //vue的数据。
                status: 0, 
            },
        });
    </script>

##### v-for：循环生成元素 #####

v-bind:key=”指定唯一值”，配合v-for使用，提高渲染效率。

**key用来指定唯一项，最好是id**，下标对应的项容易变化。

**i表示的是下标，item代表的是当前对象。**

<p v-for="item in 10" :key="i">{
       {item}}</p>
    
    <p v-for="(item,i) in 10" :key="i">{
       {i}}</p>
    
    <p v-for="(item,i) in goods" :key="i">{
       {item.name}}</p>

#### 4、代码环境 ####

模板中的所有JS代码，它的环境均为vue实例，例如：\{ \{title\}\}，得到的结果相当于vue实例.title。

#### 5、对象——new Vue实例 ####

##### ①data：Vue数据配置，对象或函数 #####

var vm = new Vue({
        
        data:{
        
            name:"dz",
            Users:{
        
                [
                {
        name:"name1",age:20},
                {
        name:"name2",age:23},
                ]
            }
        }
    });
    vm.$data.name;  //调用
    vm.name

***注意！当Vue做组件使用的时候data必须是函数–>data：function()\{\}。***

##### ②props：数组或对象，用于*接收父组件的数据（过程不可逆）* #####

var vm = new Vue({
        
        props:["name","age","sex"],  //数组指定的内容属性名称如：<xxx name="dz" age="20" sex="N"/>
    });

##### ③propsData：\{ \[key: string\]: any \}，用于props数据测试 #####

<body>
        <div id="app">
          
          <h1>{
       {name}}</h1>
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        var vm = new Vue({
         
          el: "#app", //使用el的方式进行代码片段的挂载
          props:["name"],
          propsData:{
         
              name:"接收的数据",  //把测试的数据渲染到模板中去
          },
        });
      </script>

##### ④computed：计算属性\{ \[key: string\]: Function | \{ get: Function, set: Function \} \} #####

<body>
        <div id="app">
          <h1>{
       {num}}----{
       {numTest}}</h1>
          <input v-model="num" type="text" />
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        var vm = new Vue({
         
          el: "#app", //使用el的方式进行代码片段的挂载
          data: {
         //vue的数据。
            num:15,
          },
          computed:{
         
            //把属性当做函数写在计算属性对象里面，调用计算属性可以直接得到值{
         {numTest}}，向普通属性一样调用
            numTest(){
         
                return +this.num * 2;   //+号，代表num是一个数字
            }
          },
        });
      </script>

##### ⑤methods：函数or事件，\{ \[key: string\]: Function \} #####

<body>
        <div id="app">
          
          
          
          <button @click="oneClick">oneClick</button>
        </div>
      </body>
      <script src="vue-2.4.0.js"></script>
      <script>
        var vm = new Vue({
         
          el: "#app", //使用el的方式进行代码片段的挂载
          methods: {
         
            //onClick:function(){
         
            // 两种写法  
            //},
            oneClick() {
         
              console.log("oneClick()");
            },
          },
        });
      </script>

##### 计算属性和函数的区别？？？ #####

1.  计算属性使用时，是当成属性被使用，而方法是需要调用的。
2.  计算属性会计算依赖和缓存，方法会重复执行，效率低。
3.  计算属性可以当成属性赋值，方法不具备这个功能。

### 补充！ES6模块化 ###

*  无模块化：

通常学习中使用的是无模块化的JS，导致可能在一个页面当中引用多个JS文件，**导致依赖难以管理（最终甚至理不清依赖关系）、污染全局变量（定义过多的全局变量 有可能造成全局变量冲突，也就是全局变量污染问题）。**

*  常见的模块化标准：

CommonJS、**ES6 Model**、AMD、CMD、UMD…

\*\*需要注意的是！\*\*不是所有的框架都提供了模块化的标准文件，没有提供的只能进行引用和自己写模块化。

恰巧的是vue提供了ES Model的模块化标准。

1.  vue官网下载es Model版本的vue.js
    
        <script type="module">
          import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
        </script>
    
    导入Vue，或者是访问连接，把js脚本复制到本地，然后在导入。
2.  工程导入模块化的Js文件
    
        
        <script src="index.js" type="module"></script>
    
    一个JS文件对应一个模块。
3.  模块化的JS代码导入导出。
    
        >>>>>a.js
        
        //默认导出
        export default function (a, b) {
              
          return a + b;
        }
        //具名导出
        export function sum(a, b) {
              
          return a + b;
        }
        
        //导出变量
        export var num = 10;
        
        justRun.js
        
        console.log("初始化");
        
        //*****************************************************
        
        >>>>>index.js
        
        //导入a.js中默认的导出函数，默认导出只能有一个，xxx是导出后取的名字
        import xxx from "./a.js";
        //导入a.js中具名的函数，可以导入多个
        import {
              sum} from "./a.js"
        //全部导入
        import * as obj from "./a.js"
        //仅导入,直接执行
        import "./justRun.js"
        
        //以上导入的所有内容全部可以在index.js中进行调用
        
        console.log(xxx(1,2));  //调用默认导出 的函数
        console.log(sum(3,2));  //调用导出的函数
        console.log(obj.sum(3,3));  //全部导出
        console.log(obj.num);  //全部导出

### 三、Vue组件概念 ###

**将网页划分为不同的部分，每一部分可以看做一个组件，有些组件可以通用。**

一个完整的网页是复杂的，作为整体开发，很困难：

*  代码乱
 *  不易协作
 *  难以复用

vue提供更加精细的控制方案——组件开发。

*  功能（JS代码）
 *  内容（模板代码）
 *  样式（CSS代码）

**使用Vue提供的ES Model版本的vue.js进行模块化的组件开发。**

#### 0、模块化开发工程目录结构 ####

**工程**

**|——src** `源代码目录`

**| |——componets** `组件库目录，所有的组件都写在这里面`

**| |——lib** `框架工具库目录`

**| |——App.js** `加载其他组件的App.js`

**| |——main.js** `首页加载的主组件入口，仅加载一个main.js，其他组件的加载由main.js完成(加载App.js)`

**|——index.html** `首页`

#### 1、定义组件（具有特定功能的组件） ####

##### ①定义组件 #####

定义组件需要先创建一个JS文件， 假设定义的是一个用户的组件，那么这个组件的名称可以是：**UserInfo.js**然后需要定义一个用户组件的模板。假定模板如下：

//user组件渲染的模板，这个样式写到这里
    //之后用到此用户组件的页面都会以下面的格式显示页面。
    var template = `<div>
            			 <h5>姓名：{
       {name}}</h5>
            			 <h5>年龄：{
       {age}}</h5>
        			</div>`;

##### ②**UserInfo.js**导出组件 #####

export default{
        
        //声明属性，组件可以接受传值
        props:["name","age"],
        template,   //就是上面的模板。
    //	   或者定义组件的数据，自己定义的值，这样数据不会改变。
    //     data(){
        
    //         return {
        
    //             name:"dz",
    //             age : 24
    //         }
    //     },
    }

因为是模块化开发，定义的组件必须被导出后才能被使用渲染。

##### ③App.js导入组件 #####

哪一个模块使用，哪一个模块进行导入，然后渲染。App.js渲染UserInfo.js

//导入用户组件,起一个名字：xxx（UserInfo）
    import UserInfo from "./components/UserInfo.js";

#### 2、注册组件并使用（全局或局部注册） ####

App.js导入UserInfo.js的组件之后，需要进行注册。

##### ①全局注册 #####

Vue.component("UserInfo",UserInfo);   //全局注册组件，不建议使用，除非这个组件到处使用。

##### ②局部注册 #####

局部注册，哪里使用哪里注册。

export default{
        
        template,
        //组件的局部注册
        components:{
        
            UserInfo,  //速写属性。
        },
        data(){
        
            return {
        
                users:[
                    {
        name:"东哥",age:24},
                    {
        name:"七哥",age:23},
                    {
        name:"于哥",age:20},
                ]  
            };
        }
    }

##### ③组件的使用 #####

var template = `
            <div id="app">
                
                
                <UserInfo name="毅哥" age="24" />
                <user-info name="yi哥" age="24" />
                <UserInfo name="er哥" age="24" ></UserInfo>
            </div>`;

直接使用 ,可以引用定义好的组件。

#### 3、渲染组件 ####

App.js导出组件

export default{
        
        template,
        //局部注册的组件
        components:{
        
            UserInfo
        },
    }

main.js去渲染App.js渲染的组件

/**
     * 组件渲染的入口，加载app.js去渲染页面
     */
    //导入模块化的vue
    import Vue from "./lib/vue-module.js";
    //导入userinfo.js组件
    import App from "./App.js";
    
    /**
     * 全局注册组件
     * 全局注册之后其他组件也可以使用该组件
     * 
     */
    //Vue.components('App',App);
    
    new Vue({
        
        /**
         * 局部注册组件，哪里使用哪里注册
         */
        components:{
        
            App
        },
        render(createElement){
        
            return createElement(App);  //渲染App组件
        }
    }).$mount("#app");

渲染完成后可以在index.html看到用户组件的效果。

#### 4、组件命名方式★ ####

例如：

UserInfo.js使用的是**驼峰命名法**，还可以使用user-info.js不过不推荐，导入组件的时候也是使用的驼峰命名法。

#### 5、组件声明周期 ####

![在这里插入图片描述][format_png]

*由于Vue对CSS样式开发不是特别的容易，所以有了脚手架的vue更加方便对样式的管理和代码的编写，只在模板里进行就OK了，所以说也基本不用在页面写代码，代码全部写在组件里面了。*

### 四、Vue-Cli脚手架 ###

#### 1、什么是vue脚手架 ####

vue-cli是vue提供的脚手架工具。脚手架是通过编写原始代码，经过vue-cli转换成运行的代码。

脚手架流程：

|—vue原始代码，不能直接运行—| ----**通过vue-cli压缩、编译**\----> |—浏览器能够运行的代码—|

#### 2、nodejs和npm安装和配置 ####

##### ①安装node #####

使用脚手架工具之前需要进行node和npm的安装。因为node中包含了npm所以只需要安装node就可以了。

[node官网下载][node] 。下载对应系统版本的node，然后安装。

检查安装结果：

node -v
    npm -v

##### ②配置npm源地址 #####

因为npm使用的是国外的源，下载速度慢，甚至可能出现下载失败，所以要修改npm的下载源。

打开cmd，输入：

npm config set registry http://registry.npm.taobao.org/   #修改下载源

打开cmd，输入：

npm config get registry    #检查是否修改成功

#### 3、安装vue-cli ####

下载：

npm install -g @vue/cli    #下载vue-cli

检查：

vue --version   #检查是否安装成功

#### 4、vue-cli的使用 ####

##### ①在终端中进入某个目录 #####

选择一个目录，该目录将放置你的工程文件夹。在终端中进入该目录。

##### ②搭建工程 #####

使用vue-cli提供的命令搭建工程

vue creat 工程名   #在工程文件夹中执行该命令，联网搭建工程

接下来一系列的配置

1.  选择手动配置
2.  选择工程依赖（取消代码格式化），按空格。
3.  选择保存配置文件位置，package.json。
4.  N，不保留配置信息。

##### ③vue-cli目录结构 #####

**工程**

**|——node\_modules** `依赖库文件夹`

**|——public** `页面文件夹`

**|——index.html**

**|——src** `vue源代码文件夹`

**|——assets** `静态资源文件夹，可删除`

**|——components** `组件文件夹,可删除`

**|——App.vue** `组件渲染`

**|——main.js** `主程序入口`

**|—— 一系列的配置文件…**

##### ④vue-cli打包编译 #####

**以下所有的命令都是在进入工程文件夹之后运行的。**

打包编译，是在终端中进行vue代码的编译，编译完成后会在工程目录下生成**dist文件夹**复制dist到其他目录，可以访问index.html，此时的dist与编写的源码无关了。

编译命令：

npm run build

问题：

完成后会在工程下生成dist目录，去复制出这个目录，在重新使用vscode打开它，才能在浏览器正确运，否则会报错误，不知道什么原因。

**这个编译命令是编译所有的源代码，可以用作最后的项目部署，但是不是适用于开发过程。**

##### ⑤vue-cli服务端运行 #####

开发过程中实时打包命令：

npm run serve

运行之后，可以访问serve提供的连接，可以实时的访问到，修改之后的内容。**只要一保存，代码就会在内存中进行实时打包，不会生成dist文件夹。**

不使用的时候可以使用**Ctrl+C**，关闭serve。

##### 注！其他npm命令 #####

npm i     #还原package.json里面的依赖，如果node_modules没有了。此命令仍然是在工程目录下进行。

##### ①在终端中进入某个目录 #####

选择一个目录，该目录将放置你的工程文件夹。在终端中进入该目录。

##### ②搭建工程 #####

使用vue-cli提供的命令搭建工程

vue creat 工程名   #在工程文件夹中执行该命令，联网搭建工程

接下来一系列的配置

1.  选择手动配置
2.  选择工程依赖（取消代码格式化），按空格。
3.  选择保存配置文件位置，package.json。
4.  N，不保留配置信息。

##### ③vue-cli目录结构 #####

**工程**

**|——node\_modules** `依赖库文件夹`

**|——public** `页面文件夹`

**|——index.html**

**|——src** `vue源代码文件夹`

**|——assets** `静态资源文件夹，可删除`

**|——components** `组件文件夹,可删除`

**|——App.vue** `组件渲染`

**|——main.js** `主程序入口`

**|—— 一系列的配置文件…**

##### ④vue-cli打包编译 #####

**以下所有的命令都是在进入工程文件夹之后运行的。**

编译命令：

npm run build

问题：

完成后会在工程下生成dist目录，去复制出这个目录，在重新使用vscode打开它，才能在浏览器正确运，否则会报错误，不知道什么原因。

**这个编译命令是编译所有的源代码，可以用作最后的项目部署，但是不是适用于开发过程。**

##### ⑤vue-cli服务端运行 #####

开发过程中实时打包命令：

npm run serve

运行之后，可以访问serve提供的连接，可以实时的访问到，修改之后的内容。**只要一保存，代码就会在内存中进行实时打包，不会生成dist文件夹。**

不使用的时候可以使用**Ctrl+C**，关闭serve。

##### 注！其他npm命令 #####

npm i     #还原package.json里面的依赖，如果node_modules没有了。此命令仍然是在工程目录下进行。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvOTg2NzY4LzIwMTkwOC85ODY3NjgtMjAxOTA4MjkxOTUzNTQzMzEtNjYzNDM2NDgucG5n?x-oss-process=image/format,png
[node]: https://nodejs.org/zh-cn/