落日阁,秦勇老婆,驭晶卡师
本文介绍了vue使用vue-cli创建项目,分享给大家,具体如下:
vue-cli 是一个官方发布vuejs项目脚手架:
我创建的模板项目:https://github.com/aleczhang1992/my-vue-project/tree/dev
一、步骤
1.要求已安装node.js (>=4.x, 6.x preferred) and git.
可以设置cnpm可以提升依赖包下载速度:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue-cli
sudo npm install -g vue-cli
2.创建模板项目
命令格式:vue init <template-name> <project-name>
其中template-name是可选模板项,project-name是创建项目的名称。目前提供一下几种:
也可以使用自定义的模板,可以来自远端托管仓库或本地。
选用webpack模板项目:
二、mint_ui框架的使用
1.完整引入
在 main.js 中写入以下内容:
import vue from 'vue' import mintui from 'mint-ui' import 'mint-ui/lib/style.css' import app from './app.vue' vue.use(mintui) new vue({ el: '#app', render: h => h(app) })
以上代码便完成了 mint ui 的引入。需要注意的是,样式文件需要单独引入。
2.按需引入
安装 babel-plugin-component:
npm install babel-plugin-component -d
将 .babelrc 修改为:
{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryname": "mint-ui", "style": true } ]]] }
引入方式如下
import vue from 'vue' import { button, cell } from 'mint-ui' import app from './app.vue' vue.component(button.name, button) vue.component(cell.name, cell) /* 或写为 * vue.use(button) * vue.use(cell) */ new vue({ el: '#app', render: h => h(app) })
创建项目过程中有一下几个问题:
1.本地开发状态启动项目时,常会有代码空行、分号报错的问题。 原因:在创建项目时,选择了使用eslint语法校验。
2.引入样式报错问题,babel无法编译css文件。
module not found: error: cannot resolve module 'mint-ui/style.css'
原因:全局引入需要引入样式,如果在.babelrc中设置过按需引入,则不要再专门引入css.
3.另外引入的组件要在自定义组件中注册,组件中嵌套的组件也要进行引用和注册。
4.非渲染dom组件无需写在模板内,也无需注册,可以直接调用使用。比如load的indicator
三、vue-router的使用
github地址:
在入口文件main.js中引入
import vuerouter from 'vue-router'; vue.use(vuerouter); //然后实例化一个router const router = new vuerouter({ mode: 'history', routes: routes });
rotues是自己分配的路由设置;
四、使用vuex进行状态管理
vue的状态管理工具 vuex
下面简单介绍下vuex各个部分的概念
使用vuex需要在vue.use中引入,然后实例化一个vuex.store对象就可以了,对象中需要定义state,actions,mutations,getters等内容,这样子就可以建立一个全局的状态管理机制,可以从应用的顶端去处理数据,各个组件中对数据进行操作也是通过事件直接传递到vuex中进行数据更新,然后再进行响应到其他使用同个数据的组件中,进行视图更新。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论