1.进入项目目录

2.全局安装vue-cli

输入命令:npm install vue-cli -g

若报错:ENOENT: no such file or directory, access......

进入vue-cli所在目录,手动将vue-cli删除,再重新安装即可成功。

3.创建项目框架

输入命令:vue init webpack exambank

依次按照提示输入,项目名、项目描述、项目作者等等,
然后一路回车  看到最后这句项目就创建好了。
To get started:  就是告诉你接下来该做什么,依次完成下面3行命令就可以了。进入exambank项目-----运行项目
 
4.进入exambank目录
输入命令: cd exambank

5.安装element-ui

element-ui官网:http://element.eleme.io/#/zh-CN/component/installation

输入命令:npm i element-ui -S

或者:因为是基于Vue.js和elementUI进行的项目开发,所以当然要导入Vue.j包和elementUI包:npm install --save vue element-ui

 6.安装vue-router

要进行页面跳转,所以要用到vue-router2

输入命令:npm install --save vue-router

7.安装axios

要从后端获取数据,所以要ajax请求,用vue官方推荐的axios

输入命令:npm install --save axios

8.根据需要,安装vuex

输入命令:npm install vuex --save

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

9.此后根据需要安装其他模块

npm install xxxx --save

vue-cli + element-ui + webpack 新建项目的更多相关文章

  1. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  2. vue cli 3 & webpack-merge & webpack 3 & bug

    vue cli 3 & webpack-merge & webpack & bug bug webpack-merge & bug webpack-merge ??? ...

  3. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  4. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  5. Vue.js + Element.ui 从搭建环境到打包部署

    一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...

  6. vue脚手架通过UI界面创建项目

    vue脚手架提供了图形界面操作项目,比之前通过命令操作的形式还要简单,以下是使用的步骤: 1.全局安装@vue/cli脚手架工具 npm i @vue/cli -g {使用淘宝镜像:npm insta ...

  7. 第五十三篇:Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

  8. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  9. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

随机推荐

  1. ASP.NET MVC Owin 基本理解

    一.OWIN OWIN(Open Web Interface for .Net),定义了一个服务器(IIS)和Web应用程序(MVC,Webform)通信的标准接口,并且通过抽象层使得这两个在微软平台 ...

  2. day05_雷神_函数进阶

    #day05 1.迭代器 1.1可迭代对象 str,list,tuple,dict,set,range,文件句柄 等都是可迭代对象 第一种方法:在该对象中,含有__iter__方法的就是可迭代对象,遵 ...

  3. 前端开发 - JavaScript 词法分析

    JavaScript代码运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 1.分析函数的参数 2.分析函数的变量声明 3.分析函数的函数声明表达式 具体步骤如下: 函数在运行的瞬间,生成 ...

  4. 1月第2周业务风控关注|“扫黄打非”部门查处互动作业、纳米盒等20多个学习类App

    易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全.移动安全.业务安全和网络安全,帮助企业提高警惕,规避这些似小实大.影响业务健康发展的安全风险. 1.全国"扫黄打非&q ...

  5. FFmpeg的安装与使用

    1.概述 FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频 ...

  6. Spring Cloud实践之服务注册与发现Eureka

    一.简述: 服务提供者producer与服务消费者consumer都注册到eureka server,然后服务consumer在其应用内直接调用producer的服务名来调用服务,而不是像之前一样调用 ...

  7. 【环境学习】ThinkPHP5 5.0.22/5.1.29 远程代码执行漏洞

    环境保留:2019.4.4-4.10 环境搭建: 这里我使用的是:vulhub vulhub目录结构:vulhub/thinkphp/5-rcess 测试地址(开放一段时间供大家学习):http:// ...

  8. GC日志时间分析

    在GC日志里,一条完整的GC日志记录最后,会带有本次GC所花费的时间,如下面这一条新生代GC: [GC [DefNew: 3298K->149K(5504K), secs] [Times: us ...

  9. 刚破了潘金莲的身份信息(图片文字识别),win7、win10实测可用(免费下载)

    刚破了潘金莲的身份信息(图片文字识别),win7.win10实测可用 效果如下: 证照,车牌.身份证.名片.营业执照 等图片文字均可识别 电脑版 本人出品 大小1.3MB 下载地址:https://p ...

  10. gradle构建工具

    在使用android studio开发android程序时,as就是基于gradle进行构建的,我们只需要通过run就可以编译.打包.安装,非常方便,但是究竟gradle是什么呢?  一.java构建 ...