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

最新推荐文章于 2024-04-29 16:37:48 发布

小白说(๑• . •๑)

最新推荐文章于 2024-04-29 16:37:48 发布

阅读量733

点赞数

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/dongzi_yu/article/details/106804886

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

Vue前端框架

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使用步骤

Vue官网下载vue的js文件

官网指出如果用于学习可以导入js文件（也可以访问连接，直接将vue.js内容复制出来）
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

实例化Vue对象

<script>
    var vm = new Vue({
      //1、配置模板
      el: "#app", //id选择器，选择id为app的页面标签
      //2、配置数据，页面的所有数据全部在data里面存在
      data: {
        title: "商品管理",
      }
    });
  
</script>

页面模板

<!--所有的vue数据操作全部在id为app的div里面进行操作-->
<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" />
        <!-- @click表示注册vue的单击事件;addGods是函数名称 -->
        <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>
  <!-- 1、导入vue的js文件 -->
  <script src="vue-2.4.0.js"></script>
  <!-- 2、实例化vue的对象进行挂载 -->
  <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部分知识！

速写属性，省略复制

var name = "nihao";
var age = 23;

//普通js对象，赋属性值
var obj = {
  name: name,
  age: age,
};
//es6+的速写属性，直接声明属性与变量同名可以直接复制
var suObj = {
  name,
  age,
};

console.log(obj);
console.log(suObj);

速写方法，省略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();

箭头函数

在参数()和方法体{}之间加上=>表示箭头函数，省略了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));

模板字符串

与原始的""双引号相比的局限性之外，模板字符串``可以随意的换行并且也简化了字符换的拼接。通过${变量名}就能获取到值。

//模板字符串
/**
 * 特点：
 * 可以随意换行，相当于加上了\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挂载

什么是Vue的挂载？

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

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

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

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

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

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

<div id="app">
    
</div>
<!--假设已经引导的vue.js-->
<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">
      <!--模板在template里面--> 
     </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为了防止网站攻击进行了编码。

✘ 不允许的操作：

  <script src="vue-2.4.0.js"></script>
  <script>
    new Vue({
      el: "#app",          //使用el的方式进行代码片段的挂载
      data: {              //vue的数据。
        title: "测试标题2",
      },
      //此参数是一个方法参数。
      render(createElement){
          //直接写<span style='color:red'>this is a title!</span>在模板中。
          return createElement("h1","<span style='color:red'>this is a title!</span>");
      }
    });
  </script>

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

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

√ 正确操作

  <body>
    <div id="app">
        <!--使用v-html="title"：表示title是一串html代码-->
        <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">
        <!-- *******v-bind********** -->
        <!-- <a v-bind:href="link">{{linkName}}</a> -->
        <a :href="link">{{linkName}}</a>
        <br>
        <!-- 通过input修改，a标签的href属性值 -->
        <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加盐版

      <!-- 语法糖v-model -->
      <input v-model="title" type="text" />
      <!-- 等价于绑定了value了input事件:::::::加盐版 -->
      <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 v-on:click="oneClick()">oneClick()</button> -->
        <!-- <button v-on:click="oneClick">oneClick</button> -->
        <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">
      <!--js表达式判断-->
      <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">
        <!-- v-show符合条件的显示，不和条件的直接不显示没有选择可言 -->
        <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代表的是当前对象。

<!-- item,循环10次，每一个item是当前项 -->
<p v-for="item in 10" :key="i">{{item}}</p>
<!-- 循环10次，每一次item是当前项，i是当前下标 -->
<p v-for="(item,i) in 10" :key="i">{{i}}</p>
<!-- 循环一个对象goods，item是当前项 -->
<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">
      <!--测试数据的渲染：propsData---》接收的数据-->
      <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 v-on:click="oneClick()">oneClick()</button> -->
      <!-- <button v-on:click="oneClick">oneClick</button> -->
      <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>

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

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

补充！ES6模块化

无模块化：

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

常见的模块化标准：

CommonJS、ES6 Model、AMD、CMD、UMD…

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

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

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脚本复制到本地，然后在导入。

工程导入模块化的Js文件

<!-- 加上type="module"表示当前的js文件是模块化的，在没有导出的情况下是不能使用的 -->
<script src="index.js" type="module"></script>

一个JS文件对应一个模块。

模块化的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">
            <!--使用组件，并渲染到index页面-->
            <!--<UserInfo v-for="(item,i) in users" :key="i" :name="item.name" :age="item.age"/>-->
            <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、组件声明周期

在这里插入图片描述

由于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 -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 工程名   #在工程文件夹中执行该命令，联网搭建工程

接下来一系列的配置

选择手动配置
选择工程依赖（取消代码格式化），按空格。
选择保存配置文件位置，package.json。
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 工程名   #在工程文件夹中执行该命令，联网搭建工程

接下来一系列的配置

选择手动配置
选择工程依赖（取消代码格式化），按空格。
选择保存配置文件位置，package.json。
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没有了。此命令仍然是在工程目录下进行。

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

文章目录

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命令

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

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