logo资料库

基于vue-cli、elementUI的Vue超简单入门小例子（推荐）.pdf

发布时间：2022-05-30 发布人：admin 分类：说明书 资料大小：0.27M 资料格式：pdf 举报 版权申诉
第1页 / 共7页
第2页 / 共7页
第3页 / 共7页
第4页 / 共7页
第5页 / 共7页
第6页 / 共7页
第7页 / 共7页
资料共7页，全文预览结束
    基于基于vue-cli、、elementUI的的Vue超简单入门小例子（推荐） 超简单入门小例子（推荐） 这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Project name (my-project) #回车 ? Project description #回车，也可以写点项目描述 ? Author #回车，或者输入作者 ? Vue build standalone #回车 ? Install vue-router? (Y/n) #这里是官方推荐的路由，果断yes ? Use ESLint to lint your code? #No ? Set up unit tests #No ? Setup e2e tests with Nightwatch? #No ? Should we run `npm install` for you after the project has been created? (recommended) > Yes, use NPM #可以按上下方向键选择，这里我选第一个NPM，按回车确认 Yes, use Yarn No, I will handle that myself #等待完成 完成后可能会有警告，没事，不是ERR就好 $ cd my-project #进入刚新建的文件夹 $ cnpm install #这里用的是淘宝的NPM镜像,不懂可以自行搜索cnpm $ npm run dev ###I Your application is running here: http://localhost:8080 **确保端口没被占用，打开localhost:8080 see see ** 打开我们的项目可见如下：
    名称名称 说明说明 项目构建的一些代码 开发环境的配置 build config node_modules 一些依赖包 src static .babelrc .editorconfig .gitignore .postcssrc.js index.html package-lock.json 听说是更详细的package.json package.json 源码，我们就在这个文件夹内写代码 静态文件 ES6编译的一些配置 代码风格配置文件 git上传时忽略的一些文件，比如node_modules这个文 听说是转换CSS样式的 入口页面 项目信息，项目名称，开发的依赖的记录等，一个JSON文件 现在打开src\componnets\HelloWorld.vue 把大部分代码删除，剩余如下： 到这里用了点ES6语法，如果对export和import不了解的，建议看看相关的介绍，暂时不想看也可以照着敲代码。不过建议还是看看，只需10分钟了解下export和import就好—— 阮一峰 ECMAScript 6 入门 可以看到，之前打开的页面变了样： ####现在我们来安装一下element-ui（关于element-ui详细情况请自行搜索） 可以按照官方方法使用npm i element-ui -S命令进行安装 也可以在package.json中添加，后通过cnpm install进行安装 选择2，打开package.json，找到devDependencies并在最后加上”element-ui”: “^2.2.1” "devDependencies": { ... ... "element-ui": "^2.2.1" 打开命令行停止服务，再通过cnpm install进行安装，安装完成后npm run dev启动 打开main.js在里面添加三行内容 import ElementUI from 'element-ui' //新添加 import 'element-ui/lib/theme-chalk/index.css' //新添加，避免后期打包样式不同，要放在import App from './App';之前 import Vue from 'vue' import App from './App' import router from './router' Vue.use(ElementUI) //新添加 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' }) 添加了这三行，我们就可以使用element-ui了 接下来在components文件夹内新建一个NewContact.vue 文件，添加如下代码 打开之前的HelloWorld.vue对内容进行修改（router是官方路由插件，router-link to是router的语法）： 打开router/index.js，添加新路由（router是官方路由插件，深入学习请查看文档） import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import NewContact from '@/components/NewContact'//新添加，之后在下方的component: NewContact才会生效 Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/newcontact',//和router-link to相呼应，导航到/newcontact name: 'NewContact', component: NewContact } ] }) 保存后打开页面可以看到如下： 之前的welcome变成了可点击的链接，点击后跳转看到如下页面 至此，已经我们已经把该引入的依赖，和路由的简单配置，简单组件的使用给完成了 接下来我们把精力都放到NewContact.vue这个组件，后面的代码几乎都在这个组件 打开NewContact.vue键入如下代码：
    el-input是element-ui的组件，以el-开头的是element-ui的组件 v-model这里的v-model是Vue的指令，官方说法是——在表单控件或者组件上创建双向绑定。 ="info.name"就是v-model绑定的数据，在data中return的内容里看到info.name对应的是''；info.age对应的是null return { info: { name: '', age: null, sex: '' } 当我们打开http://localhost:8080/#/newcontact 在输入框输入内容时可见，姓名：{{info.name}}双花括号里的内容也跟着改变，这就是双向绑定 v-for="item in options"就是循环options这个数组的内容 options: [ '女','男','保密' ] 如果在里面添加内容，那么下拉菜单的内容会一起变化，一 一对应 :value="item"会把你选的（‘女’，‘男’，‘保密’）传给 v-model="info.sex"会传给data中的info.sex return { info: { name: '', age: null, sex: '' } 接下来在加入新代码，NewContact.vue目前的代码如下： ..... 创建 创建 这里就是创建了一个按钮，@是v-on的缩写，点击后会出发create这个函数 就是表格要绑定的数据 在表格绑定数据情况下prop用于数据传递，tabeldata里的name