vue学习

最新推荐文章于 2023-06-22 18:25:54 发布
最新推荐文章于 2023-06-22 18:25:54 发布
阅读量409 收藏
点赞数
分类专栏： javascript 文章标签： vue 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiangBing15/article/details/100594503
版权

ToDo项目

参考

慕课网视频教程链接
视频代码git
参考链接

一、项目创建

  1. 新建文件夹 ToDo，进入文件夹 ToDo
  2. npm 初始化
# 命令会在当前目录线新建 package.json 文件
npm init

package.json 内容如下：

{
  "name": "npminstal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
  1. npm 安装依赖，
# 提示依赖其他包，则安装提示的包
npm i vue vue-loader vue-template-compiler css-loader style-loader
  1. 新建src文件夹，新建src/App.vue文件。内容如下：
<template>
    <div id="app">hello {{name}}!</div>
</template>

<script>
	export default {
	    data(){
	        return {
	            name:"world"
	        }
	    }
	}
</script>

<style scoped>
	#app{
	    color: red
	}
</style>
  1. 新建index.js，内容如下
import Vue from 'vue'
import App from './App.vue'

const root = document.createElement("div");
document.body.appendChild(root)
 new Vue({
    render:(h)=>h(App)
}).$mount(root)
  1. 新建webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry:path.join(__dirname,"src/index.js"),
    output:{
        filename:"bundle.js",
        path:path.join(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:"vue-loader"
            },
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
      ]
}
  1. 编辑 package.json， scripts属性增加build，如下：
 ...
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config  webpack.config.js"
  },
  ...
  1. 测试构建
npm run build

二、配置css、image等

  1. css文件处理
    step1、新建 src/assert目录，新建src/assert/stylus/app.css。内容如下
body{
    color: green;
}

step 2、index.js文件中引入app.css

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

import "./assert/stylus/app.css"

const root = document.createElement("div");
···

step3、安装style-loader css-loader。（第一章节已安装）
在这里插入图片描述

step4、配置webpack.config.js（第一章节已配置）
在这里插入图片描述
2. 图片处理
step1、新建 src/image目录，导入图片 leaf001.jpeg（图片名称）
step2、修改 src/stylus/app.css。修改后内容如下

body{
    color: green;
    background-image: url(../image/leaf001.jpeg)
}

step3、安装url-loader file-loader

npm i url-loader file-loader

step4、配置webpac.config.js

···
rules:[
            {
                test:/\.vue$/,
                loader:"vue-loader"
            },
          ···
            {
                test:/\.jpeg$/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            limit:1024,
                            //[name]:文件名   [ext]:文件扩展名
                            name:"prefix_[name].[ext]"
                        }
                    }
                ]
            }
        ]
        ···
  1. stylus文件处理
    step1、新建src/stylus/app.styl。内容如下：
body
  font-size 40px

step2、index.js引入app.styl

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

import "./assert/stylus/test.css"
import "./assert/image/leaf001.jpeg"
import "./assert/stylus/test.styl"

const root = document.createElement("div");
document.body.appendChild(root)
 new Vue({
    render:(h)=>h(App)
}).$mount(root)

step3、安装stylus stylus-loader

npm i stylus stylus-loader

step4、修改webpack.config.js，配置stylus-loader

···
rules:[
            ···
            {
                test:/\.styl$/,
                use:["style-loader","css-loader","stylus-loader"]
            }
        ]
···

三、配置weback-dev-server

  1. 安装webpack-dev-server cross-env
npm i webpack-dev-server cross-env
  1. 配置package.json。增加dev
···
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config  webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config  webpack.config.js"
  },
···
  1. 配置webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require("html-webpack-plugin")
const webpack = require("webpack")


const isDev = process.env.NODE_ENV === "development"

const config = {
    target:"web",
    entry:path.join(__dirname,"src/index.js"),
    output:{
        filename:"bundle.js",
        path:path.join(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:"vue-loader"
            },
            ···
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            "process.env":{
                NODE_ENV:isDev?'"development"':'"production"'
        }
        }),
        new HTMLPlugin()
      ]
}

if(isDev){

    config.devtool = "#cheap-module-eval-source-map"
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
    config.devServer={
        host:"0.0.0.0",
        port:9080,
        overlay:{
            error:true
        },
        hot:true
    }
}

module.exports = config
  1. 启动webpack-dev-server
npm run dev

四、业务开发

  1. 删除无用代码
    删除app.vue中个标签中的内容
    删除index.js 中引入的全局样式

  2. 安装插件

npm i postcss-loader autoprefixer babel-loader babel-core 
npm i babel-preset-env babel-plugin-transform-vue-jsx
  1. 新建 .babelrc。内容如下：
{
    "presets": [
        "env"
    ],
    "plugins": [
        "transform-vue-jsx"
    ]
}
  1. 新建postcss.config.js。内容如下：

const autoprefixer = require("autoprefixer")

module.exports={
    plugins:[
        autoprefixer()
    ]
}
  1. 配置 webpack.config.js。内容如下
···
{
    test:/\.jsx$/,
    loader:"babel-loader"
},
{
    test:/\.styl$/,
    use:[
        "style-loader",
        "css-loader",
        {
            loader:"postcss-loader",
            options:{
                sourceMap:true
            }
        }
    ]
}
···
  1. 界面
    新建 src/ToDo文件夹。ToDo目录下新建

header.vue

<template>
    <header class="main-header">
        <h1>Todo</h1>
    </header>
</template>

<script>
export default {
    
}
</script>

<style lang="stylus" scoped>
.main-header
    text-align center
    h1
        font-size 100px
        color rgba(175,47,47,0.4)
        font-weight 400
        margin 20px
</style>

footer.jsx

import "../assert/stylus/footer.styl"

export default {
    data(){
        return {
            author:"XB"
        }
    },
    render(){
        return (
            <div id="footer">
                <span>Write by {this.author}</span>
            </div>
        )
    }
}

todo.vue


<template>
<section class="real-app">

    <input 
        type="text"
        class="add-input"
        placeholder="接下去要做什么"
        autofocus="autofocus"
        @keyup.enter="addTodo"
    >
    <Item :todo="todo"> </Item>
    <Tabs :filter="filter"></Tabs>
</section>
    
</template>

<script>

import Item from "./item.vue"
import Tabs from "./tabs.vue"

export default {
    data(){
        return{
            todo: {
                id:1,
                content:"学习",
                completed:false
            },
            filter:"all"
        }
       
    },
    components:{
        Item,
        Tabs
    },
    methods:{
        addTodo(){

        }
    }
}
</script>

<style lang="stylus" scoped>
.real-app
    width 600px
    margin 0 auto
    box-shadow 0 0 5px #666
.add-input
    position relative
    margin 0
    width 100%
    font-size 24px
    font-family inherit
    font-weight inherit 
    line-height 1.4em
    border none
    outline none 
    color inherit 
    box-sizing border-box
    font-smoothing antialiased
    padding 16px 16px 16px 36px
    border none
    box-shadow inset 0 -2px 1px rgba(0, 0, 0, 0.03)
</style>

item.vue


<template>

<div :class="['todo-item', todo.completed?'completed':'']">

    <input 
        type="checkbox"
        class="toggle"
        v-model="todo.completed"
    >
    <label >{{todo.content}}</label>
    <button class="destory" @click="deleteTodo"></button>
</div>
    
</template>

<script>
export default {
    props:{
        todo:{
            type:Object,
            required:true
        }
    },
    methods:{
        deleteTodo(){

        }
    }
    
}
</script>


<style lang="stylus" scoped>

.todo-item
        position relative
        background-color #fff
        font-size 24px
        border-bottom 1px solid rgba(0,0,0,0.06)
        &:hover
            .destory:after
                content 'x'            
        label
            white-space pre-line
            word-break break-all
            padding 15px 60px 15px 15px
            margin-left 45px
            display block
            line-height 1.2
            transition color 0.4s
        &.completed
            label
                color #d9d9d9
                text-decoration line-through
    .toggle
        text-align center
        width 50px
        height 30px
        position absolute
        top 0
        bottom 0
        margin auto 0
        border none
        appearance none
        outline none
        &:after
            content url('../assert/image/unChecked.svg')
        &:checked:after
            content url('../assert/image/checked.svg')
    .destory
        position absolute
        top 0
        right 10px
        bottom 0
        width 40px
        height 40px
        margin auto 0
        font-size 30px
        color #cc9a9a
        margin-bottom 11px
        transition color 0.2s ease-out
        background-color transparent
        appearance none
        border-width 0
        cursor pointer
        outline none

</style>

tabs.vue


<template>

<div class="helper">
    <span class="left">2 items left</span>
    <span class="tabs">
        <span 
            v-for="state in states" 
            :key="state"
            :class="['state',filter===state?'actived':'']"
            @click="toggleFilter(state)"
            >
            {{state}}
        </span>
    </span>
    <span class="clear" @click="clearAllCompleted">Clear Completed</span>
</div>
    
</template>

<script>
export default {
    props:{
        filter:{
            type:String,
            required:true
        }
    },
    data(){
        return {
            states:["all","active","completed"]
        }
    },
    methods:{
        clearAllCompleted(){},
        toggleFilter(){}
    }
}
</script>

<style lang="stylus" scoped>
.helper
    font-weight 100
    display flex
    justify-content space-between
    padding 5px 0
    line-height 30px
    background-color #ffffff
    font-size 14px
    font-smoothing antialiased
.left, .clear, .tabs
    padding 0 10px
.left .clear
    width 150px
.left
    text-align center
.clear
    text-align right
    cursor pointer
.tabs
    width 200px
    display flex
    justify-content space-between
    *
        display inline-block
        padding 0 10px
        cursor pointer
        border 1px solid rgba(175,47,47,0)
        &.actived
            border-color rgba(175,47,47,0.4)
            border-radius 5px
</style>
  1. 业务

五、遇到的问题

  1. npm 安装警告
···
npm WARN vue-loader@15.7.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
···

问题分析：vue-loader依赖css-loader，需要手动安装css-loader
解决方案：

npm i css-loader
  1. npm run build 提示如下：
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

输入：yes

  1. 解析.vue文件报 Module parse failed: Unexpected character ‘#’
ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./src/index.js 2:0-27 8:20-23

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang=css& 16:0
Module parse failed: Unexpected character '#' (16:0)

问题分析：vue-loader 解析css样式失败
解决方案 ：安装并配置style-loader css-loader，并配置webpack.config.js
step、安装loader

npm i style-loader css-loader

setp2、修改webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
···
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:"vue-loader"
            },
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
      ]
}
蓝色小象
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 学习
freeking101的博客
07-17 8288
​Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
vue的基本使用
最新发布
m0_73381672的博客
05-29 898
npm是JS的一个包管理程序，相当于后端的maven，Node Package Manager。
vue的学习
l10711097061的博客
06-22 7519
title: VUE 一、Vue简介 1.1 简介 ::: tip Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。 ::: 1.2 MVVM 模式的实现者——双向数据绑定模式 Model：模型层，在这里表示 JavaScri
Vue介绍与入门（一篇就可入门）
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 6180
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
Vue学习手册
02-26
这份"Vue学习手册"旨在引导你逐步掌握Vue的核心概念和实践技巧。 一、Vue基础知识 Vue的基础架构围绕着一个核心对象Vue实例，它是一个数据绑定和事件处理的容器。通过声明式的模板语法，你可以轻松地将数据绑定到...
Vue学习
02-13
Vue-Cli项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build运行单元测试npm run test:unit整理和修复文件npm run lint自定义配置请参阅。
Vue学习20210314.pdf
08-27
Vue.js 是一款流行的前端JavaScript框架，用于构建...总的来说，这篇Vue学习总结涵盖了从环境配置到基础语法和指令的讲解，是初学者入门Vue的良好资源。理解并掌握这些知识，将有助于开发者构建高效、动态的前端应用。
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
vue学习资源
07-29
vue 比较好的教学资源，供参考
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习总结
07-18
本篇文章将基于“vue学习总结”的标题和描述，深入探讨Vue 2.0与Vue 1.0的主要区别，并通过“vue多页面”、“vue”以及“多页面应用实例”三个主题，分享关于Vue在实际项目中的应用和最佳实践。 首先，我们来看看...
Vue学习-Vue入门
weixin_59357453的博客
04-02 4275
这是一篇vue学习记录
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值