Vue系统学习(一) vue-cli3 创建项目并简单实现list增加删除功能

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

其实很早就把这几个demo代码写完了(可参照github提交时间)，现在想着把对应操作的博客给补起来, 代码全部托管在 github : https://github.com/wgPython/vue_study_demo

首先看实现效果

一 vue-cli 3 创建项目

注意我是用的vue-cli3 , 可以参照官网如何安装： https://cli.vuejs.org/zh/guide/installation.html

我个人人为相对vue-cli 2 ， 3创建项目更加人性化了，我基本没有花时间去了解webpack打包,

# 安装最新的vue-cli
npm install -g @vue/cli     # npm 自行查阅如何安装
# OR
yarn global add @vue/cli
# 查看版本
vue --version    # 3.x.x
# 创建项目 
vue create demo3   # 或者 vue ui  # 这种会出现一个图形化界面 可参
# 可参考 https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

创建项目输入完回车, 就会出现选择界面 我们选择手动

然后回车选择 预先设置好的配置 比如vuex Router, 这是我需要的设置

空格选中， 全部选择完后 回车下一步

下一步，我基本就是一路next

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

这一步我选择的paakage.json 因为我熟悉过vue-cli2， 对这个文件目录稍微熟悉点

我安装完后就是这样的

等待安装完毕 启动项目

cd demo1
yarn serve   # 可以看一下pacakge.json serve 对应执行 vue-cli-service serve

按照命令行提示网址 http://localhost:8080/#/ 浏览器里面 就可以看到 欢迎界面了 是不是很简单更人性化了我反正认为工具更高级之后，使用起来肯定是更方便的， 否则尤雨希不会搞这事的。当然用最新的方便的工具可能就要挨最毒的打，因为新的东西可能有别人没踩过的坑，这也是新技术的通病。

二 实现简单页面

前提：你应该掌握了vue的基本写法， v-if v-model等，还有组件的使用等等

涉及到的技术点: Element-UI vue-router

# 安装Element-UI  参考:http://element-cn.eleme.io/#/zh-CN/component/quickstart
cd demo1   # 首先进入你的项目下
npm i element-ui -S   # 命令安装
npm install --save element-ui   # 可能需要这样  npm 建议指定到 淘宝镜像源 
# 配置你的src/main.js文件     src 文件夹是我们的主文件夹，代码全写在这里
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';    # 新加
import 'element-ui/lib/theme-chalk/index.css';     # 新加
Vue.use(ElementUI)   # 新家挂载
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

  • 创建视图

    在src/views 创建 一个新vue 名字为ListOne文件, 我用的webstorm IDE自动创建,格式如下

<template>
</template>
<script>
    export default {
        name: 'ListOne',
        data() {
            return {}
        }
    }
</script>
<style scoped>
</style>

然后实现功能，代码很简单，我就不在这里贴代码了 可以去我的 github 上查看

实现逻辑一
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/views/ListOne.vue

定义了一个组件内局部变量名list_info为 list类型， 然后和input框双向绑定，点击确定按钮就添加到list_info, 同时li 标签也在遍历 list_info，为每个list绑定一个click方法删除， 参考代码，基本看一眼就懂了。
实现逻辑二

使用组件的方式，需要创建一个子组件，代码如下
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/components/TodoItem.vue

在创建一个 view文件 ListTwo
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/views/ListTwo.vue

重点说下 就是用到了 props 父子组件传值， $emit 内置函数回调，比逻辑一稍微高级一些

路由控制

简单使用不难，高级的我目前没怎么用

直接在 src / router.js 下配置即可
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/router.js

然后再重新自动启动 http://localhost:8080/#/listone 下查看效果

总结

  • 到这里可以说基本能用vue-cli创建项目，基础的使用，组件的调用

  • 其实代码我很早就写完了，博客是我后来补起来的，如果不准确，可以留言。

以上是 Vue系统学习(一) vue-cli3 创建项目并简单实现list增加删除功能 的全部内容， 来源链接： utcz.com/z/377792.html

回到顶部