Vue使用vue-cli创建项目


Posted in Javascript onSeptember 01, 2017

本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下:

vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli

我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev

Vue使用vue-cli创建项目

Vue使用vue-cli创建项目

一、步骤

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是创建项目的名称。目前提供一下几种:

Vue使用vue-cli创建项目

也可以使用自定义的模板,可以来自远端托管仓库或本地。

选用webpack模板项目:https://github.com/vuejs-templates/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.

Vue使用vue-cli创建项目

3.另外引入的组件要在自定义组件中注册,组件中嵌套的组件也要进行引用和注册。

4.非渲染dom组件无需写在模板内,也无需注册,可以直接调用使用。比如load的Indicator

Vue使用vue-cli创建项目

三、vue-router的使用

github地址:https://github.com/vuejs/vue-router

在入口文件main.js中引入

import VueRouter from 'vue-router';
Vue.use(VueRouter);
//然后实例化一个router
const router = new VueRouter({
mode: 'history',
routes: routes
});

rotues是自己分配的路由设置;

四、使用vuex进行状态管理

vue的状态管理工具 vuex

下面简单介绍下vuex各个部分的概念

  • state是一个全局的状态存储,数据会存储在其中,vue组件可以直接访问其中的值,但是只可以读,不可以进行写操作
  • getter,有些时候我们需要对获取的数据进行加工,而不是直接获取state中的数据,这时候可以通过getter定义函数,返回对应的数据
  • mutations是vuex中唯一一个可以修改数据的地方,mutations可以定义事件函数,在vue组件中可以通过commit发射事件,调用函数。需要注意的是,mutations中的操作必须是同步的,不可以存在异步操作的情况。
  • actions和 mutation比较相似,不同的是actions中不直接修改state,而是通过commit调用mutations修改数据,而且actions中可以存在异步处理逻辑

使用vuex需要在Vue.use中引入,然后实例化一个Vuex.Store对象就可以了,对象中需要定义state,actions,mutations,getters等内容,这样子就可以建立一个全局的状态管理机制,可以从应用的顶端去处理数据,各个组件中对数据进行操作也是通过事件直接传递到Vuex中进行数据更新,然后再进行响应到其他使用同个数据的组件中,进行视图更新。

Vue使用vue-cli创建项目

Vue使用vue-cli创建项目

Vue使用vue-cli创建项目

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 大数据相加的问题
Aug 03 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 #Javascript
ionic2懒加载配置详解
Sep 01 #Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 #Javascript
Vue的Class与Style绑定的方法
Sep 01 #Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 #Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 #Javascript
Angularjs实现上传图片预览功能
Sep 01 #Javascript
You might like
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Python代码的打包与发布详解
2014/07/30 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python星号*与**用法分析
2018/02/02 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
Shell如何接收变量输入
2012/09/24 面试题
军训的自我鉴定
2013/12/10 职场文书
2014年科技工作总结
2014/11/26 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js