Vue基础

最新推荐文章于 2024-07-11 09:55:55 发布

我真不是李华

最新推荐文章于 2024-07-11 09:55:55 发布

阅读量709

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40820015/article/details/121195364

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 Vue简介

1.1 Vue 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

1.2 Vue的基本使用步骤

需要提供标签用于填充数据
引入vue.js库文件
可以使用vue的语法做功能了
把vue提供的数据填充到标签里面

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div>{{msg + '----' + 123}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            el: '#app',//获取元素，js选择器
            data: {//存放要渲染到页面上的数据
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

2 Vue指令

Vue中指定都是以 v- 开头
指令的本质是自定义属性

2.1 Vue系统指令

数据绑定指令

v-text ：填充纯文本，相比插值表达式更加简洁

v-html ：填充HTML片段，存在安全问题，本网站内部数据可以使用，来自第三方的数据不可以用

v-pre：填充原始信息，显示原始信息，跳过编译过程（分析编译过程）

v-once：只编译一次，显示内容之后不再具有响应式功能

v-model：双向数据绑定

事件绑定指令

v-on：简写@，绑定click，change等事件

事件修饰符：.stop阻止冒泡，.prevent 阻止默认行为

按键修饰符：.enter 回车键，.esc 退出键

自定义按键修饰符：全局 config.keyCodes 对象

属性绑定指令

v-bind：v-bind:class 绑定class对象或者数组，v-bind:style绑定样式

分支结构指令

v-if：用于条件性地渲染一块内容，v-else、v-else-if

v-show：元素始终会被渲染并保留在 DOM 中

v-if与v-show的区别：v-if控制元素是否渲染到页面，v-show控制元素是否显示（已经渲染到了页面）

循环结构指令

v-for：遍历数组

不推荐在同一元素上使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

2.2 自定义指令

内置指令不能满足我们特殊的需求
Vue允许我们自定义指令
Vue.directive：注册全局指令，可以带参数
指令使用时以v-开头

钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用。

我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

自定义指令局部指令

局部指令，需要定义在 directives 的选项用法和全局用法一样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准

3 Vue常用特性

3.1 表单修饰符

.number 转换为数值
.trim 自动过滤用户输入的首尾空白字符

.lazy 将input事件切换成change事件

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

3.2 计算属性computed

模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁
计算属性是基于它们的响应式依赖进行缓存的
computed比较适合对多个变量或者对象进行处理后返回一个结果值

3.3 侦听器watch

使用watch来响应数据的变化
一般用于异步或者开销较大的操作
watch 中的属性一定是data 中已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

3.4 过滤器

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和v-bind表达式。
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
支持级联操作
过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

3.5 生命周期

事物从出生到死亡的过程
Vue实例从创建到销毁的过程，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

常用的钩子函数

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用，此时data 和 methods 以及页面的DOM结构都没有初始化

created：在实例创建完成后被立即调用此时data 和 methods已经可以使用,但是页面还没有渲染出来

beforeMount：在挂载开始之前被调用此时页面上还看不到真实数据只是一个模板页面而已

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上,在这个钩子函数里面我们可以使用一些第三方的插件

beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前,页面上数据还是旧的

updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。页面上数据已经替换成最新的

beforeDestroy：实例销毁之前调用

destroyed：实例销毁后调用

4 数组

4.1 数组变异方法

在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push() ：往数组最后面添加一个元素，成功返回当前数组的长度

pop() ：删除数组的最后一个元素，成功返回删除元素的值

shift() ：删除数组的第一个元素，成功返回删除元素的值

unshift()：往数组最前面添加一个元素，成功返回当前数组的长度

splice()：有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值

sort()：使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse()：将数组倒序，成功返回倒序后的数组

4.2 替换数组

不会改变原始数组，但总是返回一个新数组

filter ：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat：concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组

slice：slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

4.3 动态数组响应式数据

Vue.set(a,b,c) 让触发视图重新更新一遍，数据动态起来，a是要更改的数据、b是数据的第几项、c是更改后的数据

5 组件

组件 (Component) 是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素，封装可重用的代

5.1 组件注册

全局注册

Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
全局组件注册后，任何vue实例都可以用

组件注意事项

组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串

局部注册

在components属性中注册
只能在当前注册它的vue实例中使用

5.2 Vue组件之间传值

父组件向子组件传值

父组件发送的形式是以属性的形式绑定值到子组件身上。
子组件用属性props接收
在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

子组件向父组件传值

子组件用$emit()触发事件
$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据
父组件用v-on监听子组件的事件

兄弟之间的传递

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
提供事件中心 var hub = new Vue()
传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名
销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

5.3 组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
在子组件中使用标签实现
匿名插槽不需要指定名称
具名插槽在父组件中使用"slot"属性，子组件使用中的 “name” 属性绑定元素
作用域插槽是父组件对子组件加工处理，既可以复用子组件的slot，又可以使slot内容不一致，在父组件中使用slot-scope属性

6 接口调用

6.1 promise

主要解决异步深层嵌套的问题
promise 提供了简洁的API 使得异步操作更加容易

实例方法

.then()

得到异步任务正确的结果

.catch()

获取异常信息

.finally()

成功与否都会执行（不是正式标准）

静态方法

.all()

Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

.race()

Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

6.2 fetch

Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch(url, options).then(）

fetch API 中的 HTTP 请求

fetch(url, options).then(）
HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默认的是GET请求
- 需要在options对象中指定对应的method，method:请求使用的方法
- post和普通请求的时候需要在options中设置请求头headers和body

fetchAPI 中响应格式

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

6.3 axios

基于promise用于浏览器和node.js的http客户端
支持浏览器和node.js
支持promise
能拦截请求和响应
自动转换JSON数据
能转换请求和响应数据

axios基础用法

get和 delete请求传递参数
- 通过传统的url 以 ? 的形式传递参数
- restful 形式传递参数
- 通过params 形式传递参数
post 和 put 请求传递参数
- 通过选项传递参数
- 通过 URLSearchParams 传递参数

axios 全局配置

#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios 拦截器

请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作
  - 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
  - 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

async和await

async作为一个关键字放到函数前面
- 任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
async/await 让异步代码看起来、表现起来更像同步代码

7 路由

7.1 路由的概念

路由的本质就是一种对应关系
后端路由是由服务器端进行实现，并完成资源的分发
前端路由是依靠hash值(锚链接)的变化进行实现
前端路由主要做的事情就是监听事件并分发执行事件处理函数

7.2 Vue Router简介

Vue Router是一个Vue.js官方提供的路由管理器，和Vue.js非常契合，可以一起方便的实现SPA(single page web application，单页应用程序)应用程序的开发。

Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性：

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

7.3 Vue Router的使用

1.导入js文件

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

2.添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址

<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

3.添加路由填充位（路由占位符）

<router-view></router-view>

4.定义路由组件

var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }

5.配置路由规则并创建路由实例

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

6.将路由挂载到Vue实例中

new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})

路由重定向

可以通过路由重定向为页面设置默认展示的组件

在路由规则中添加一条路由规则即可，如下：

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

嵌套路由

点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容
父级路由通过children属性配置子级路由

动态路由匹配

通过动态路由参数的模式进行路由匹配
使用props将组件和路由解耦
可以通过路由组件传递参数

命名路由以及编程式导航

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”
声明式导航：通过点击链接实现导航的方式，叫做声明式导航，例如：普通网页中的链接或 vue 中的
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航，例如：普通网页中的 location.href

Vue-Router中常见的导航方式

this.$router.push(“hash地址”);
this.$router.push("/login");
this.$router.push({ name:‘user’ , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:“jack”} });
this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );

8 前端工程化

8.1 ES6模块化

ES6模块化规范中定义：

每一个js文件都是独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字

8.2 webpack

概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

webpack的基本使用

创建项目，并打开项目所在目录的终端：npm init -y
安装webpack：npm install webpack webpack-cli -D
在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack

webpack.config.js文件说明

module.exports = {
  mode:"development"//可以设置为development(开发模式)，production(发布模式)
}
#补充：mode设置的是项目的编译模式。
#如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
#如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些

package.json文件说明

"scripts":{
   "dev":"webpack"
 }

scripts节点下的脚本，可以通过 npm run 运行，如：

运行终端命令：npm run dev
将会启动webpack进行项目打包

设置webpack的打包入口/出口

  const path = require("path");
    module.exports = {
       mode:"development",
        //设置入口文件路径
        entry: path.join(__dirname,"./src/xx.js"),
        //设置出口文件
        output:{
            //设置路径
            path:path.join(__dirname,"./dist"),
            //设置文件名
            filename:"res.js"
        }
    }

设置webpack的自动打包

1.安装自动打包功能的包:webpack-dev-server

npm install webpack-dev-server -D

2.修改package.json中的dev指令

"scripts":{
   "dev":"webpack-dev-server"
}

3.将引入的js文件路径更改为：

4.运行npm run dev，进行打包

补充：默认打开服务器网页，打开package.json文件，修改dev命令

  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

配置html-webpack-plugin打开默认预览页面功能

1.安装默认预览功能的包:html-webpack-plugin

npm install html-webpack-plugin -D

2.修改webpack.config.js文件，如下：

 //导入包
 const HtmlWebpackPlugin = require("html-webpack-plugin");
        //创建对象
      const htmlPlugin = new HtmlWebpackPlugin({
        //设置生成预览页面的模板文件
      template:"./src/index.html",
               //设置生成的预览页面名称
      filename:"index.html"
   })

3.继续修改webpack.config.js文件，添加plugins信息：

module.exports = {
       plugins:[ htmlPlugin ]
 }

webpack中的加载器

说明：通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包，loader加载器包含：

less-loader
sass-loader
url-loader:打包处理css中与url路径有关的文件
babel-loader:处理高级js语法的加载器
postcss-loader
css-loader,style-loader

注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用

1.安装包

npm install style-loader css-loader -D

2.配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                 {
                     //test设置需要匹配的文件类型，支持正则
                     test:/\.css$/,
                     //use表示该文件类型需要调用的loader
                     use:['style-loader','css-loader']
                }
            ]
        }
     }

安装less,less-loader处理less文件

1.安装包

npm install less-loader less -D

2.配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
        ......
      plugins:[ htmlPlugin ],
          module : {
              rules:[
                  {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                 }
              ]
          }
     }

安装sass-loader,node-sass处理less文件

1.安装包

npm install sass-loader node-sass -D

2.配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
         ......
         plugins:[ htmlPlugin ],
         module : {
             rules:[
                 {
                     //test设置需要匹配的文件类型，支持正则
                     test:/\.css$/,
                     //use表示该文件类型需要调用的loader
                     use:['style-loader','css-loader']
                 },
                    {
                        test:/\.less$/,
                        use:['style-loader','css-loader','less-loader']
                    },
                    {
                        test:/\.scss$/,
                        use:['style-loader','css-loader','sass-loader']
                    }
                ]
            }
        }

安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）

1.安装包

npm install postcss-loader autoprefixer -D

2.在项目根目录创建并配置postcss.config.js文件

const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}

3.配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

打包样式表中的图片以及字体文件

在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理

使用url-loader和file-loader来处理打包图片文件以及字体文件

1.安装包

npm install url-loader file-loader -D

2.配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

打包js文件中的高级语法

有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码

我们需要安装babel系列的包

1.安装babel转换器

npm install babel-loader @babel/core @babel/runtime -D

2.安装babel语法插件包

npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3.在项目根目录创建并配置babel.config.js文件

module.exports = {
    presets:["@babel/preset-env"],
    plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

9 Vue单文件组件

9.1 Vue单文件组件介绍

每一个Vue单文件组件都由三部分组成

template组件组成的模板区域
script组成的业务逻辑区域
style样式区域

代码如下：

<template>
    组件代码区域
</template>
<script>
    js代码区域
</script>
<style scoped>
    样式代码区域
</style>

配置.vue文件的加载器

1.安装vue组件的加载器

npm install vue-loader vue-template-compiler -D

2.配置规则：更改webpack.config.js的module中的rules数组

 const VueLoaderPlugin = require("vue-loader/lib/plugin");
    const vuePlugin = new VueLoaderPlugin();
    module.exports = {
        ......
        plugins:[ htmlPlugin, vuePlugin  ],
        module : {
            rules:[
                ...//其他规则
                { 
                    test:/\.vue$/,
                    loader:"vue-loader",
               }
        ]
    }
}

9.2 在webpack中使用vue

想要让vue单文件组件能够使用，我们必须要安装vue并使用vue来引用vue单文件组件。
1.安装Vue

npm install vue -S

2.在index.js中引入vue：import Vue from “vue”

3.创建Vue实例对象并指定el，最后使用render函数渲染单文件组件

 const vm = new Vue({
        el:"#first",
        render:h=>h(app)
    })

使用webpack打包发布项目

在项目上线之前，我们需要将整个项目打包并发布。

1.配置package.json

    "scripts":{
        "dev":"webpack-dev-server",
        "build":"webpack -p"
    }

2.在项目打包之前，可以将dist目录删除，生成全新的dist目录

9.3 Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。

安装3.x版本的Vue脚手架

npm install -g @vue/cli

基于3.x版本的脚手架创建Vue项目

1.使用命令创建Vue项目

vue create my-project

2.基于ui界面创建Vue项目

vue ui

3.基于2.x的旧模板，创建Vue项目

npm install -g @vue/cli-init
vue init webpack my-project

4.分析Vue脚手架生成的项目结构

node_modules:依赖包目录
public：静态资源目录
src：源码目录
src/assets:资源目录
src/components：组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:

Vue脚手架的自定义配置

1.通过 package.json 进行配置 [不推荐使用]

"vue":{
     "devServer":{
     "port":"9990",
     "open":true
   }
}

2.通过单独的配置文件进行配置，创建vue.config.js

module.exports = {
         devServer:{
         port:8888,
         open:true
     }
 }

9.4 Element-UI的基本使用

Element-UI:一套基于2.0的桌面端组件库
1.安装

npm install element-ui -S

2.导入使用

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)

我真不是李华

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

1 Vue简介1.1 Vue 是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合1.2 Vue的基本使用步骤需要提供标签用于填充数据引入vue.js库文件可以使用vue的语法做功能了把vue提供的数据填充到标签里面<body> <div id="app"> <div>{{msg}}</div>
复制链接

扫一扫

专栏目录