其实很早就把这几个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打包
# npm 指定淘宝镜像 加快包下载速度
npm config set registry https://registry.npm.taobao.org
# 不想用可以还原
# npm config set registry https://registry.npmjs.org
# 安装最新的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创建项目,基础的使用,组件的调用
- 其实代码我很早就写完了,博客是我后来补起来的,如果不准确,可以留言。