vue及ElementUI环境搭建
1. nodejs安装及npm安装
- 下载地址:https://nodejs.org/en/download/
- 选择windows Installer
- 下载完成后 运行node-v8.11.1-x64.msi
- 重启电脑后,node和npm都安装完成
- 通过 node -v 和 npm -v 命令验证是否按照成功
- npm 安装太慢,可以切换成淘宝npm镜像cnpm,安装命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm -v 验证是否安装成功
2. vue安装
- 全局安装vue-cli
npm instsall -g vue-cli
3. 初始化vue项目
# demo是项目名
vue init webpack demo
- 接下来会有一些初始化的设置,其中vue-router是路由,反正我都会选择安装,其他的可以回车跳过或者选择no
- 按照提示,cd到新建的项目下,运行npm install
- 运行npm run dev
- 到这里,不出意外的话可以在浏览器里面看到Vue的初始化模板了,如果没有可能是端口号被占用,这里就将配置文件config/index.js里面的端口号改掉就可以了
- 另外还要补充一下,最后的打包如果在本地起服务器运行打包后的文件是无法运行的,会报错404,所以这里将assetsPublicPath里面的 "/"改成"./"
4. 安装ElementUI
- cd到当前项目 运行 npm i element-ui -S
- 打开src目录下的main.js , 修改如下:
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 在components目录下,修改HelloWorld.vue, 在template内加入如下代码:
<div class="block">
<span class="demonstration">默认显示颜色</span>
<span class="wrapper">
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
</span>
</div>
</div>
-- 执行命令 npm run dev,就可以看到elementUi是否成功
5. 打包
- 在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了,dist目录的名字可以自定义在配置文件里面
vue及ElementUI环境搭建的更多相关文章
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- vue初级学习--环境搭建
一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...
- vue的开发环境搭建命令加图解
vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...
- vue学习001 --环境搭建
系统 : win cmd: cmder 链接:https://cmder.net/ 1.安装node.js 链接地址: http://cdn.npm.taobao.org/dist/node/v10. ...
- 应用一:Vue之开发环境搭建
简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...
- Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期
目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...
- vue+webpack项目环境搭建
首先安装node.js 下载地址:https://nodejs.org/en/download/ 看下是否成功安装 node -v 安装webpack,命令行npm install webpack - ...
随机推荐
- VeeamBackup9.5安装与配置
产品介绍 Veeam是一家第三方的虚拟化数据中心备份及恢复公司,主要软件为Veeam Availability Suite,包括Veeam Backup & Replication和Veeam ...
- java 日期递增
public static void main(String[] args) throws ParseException { // 方法一 // Format f = new SimpleDateFo ...
- Good Bye 2018 (A~F, H)
目录 Codeforces 1091 A.New Year and the Christmas Ornament B.New Year and the Treasure Geolocation C.N ...
- BZOJ.4888.[TJOI2017]异或和(树状数组)
BZOJ 洛谷 \(Description\) 求所有区间和的异或和. \(n\leq 10^5,\ \sum a_i\leq 10^6\). \(Solution\) 这样的题还是要先考虑按位做. ...
- 什么是C++
1.到底什么是C++ C++是一门面向对象的程序设计语言. 关键词:程序设计语言,面向对象 程序设计语言是用来书写计算机程序的语言,更形象的说,程序设计语言是用来和计算机“交流的语言.” 面向对象(o ...
- [CF543A]/[CF544C]Writing Code
[CF543A]/[CF544C]Writing Code 题目大意: 有\(n\)种物品,每种物品分别要\(c_i\)的代价,每个物品有\(1\)的体积,每个物品可以选多个,代价不能超过\(b\), ...
- Struts2网页面传值两种方式
第一种方式: /** 列表 */ public String list() throws Exception { List<Role> roleList = roleService.fin ...
- Java基础-对象的内存分配与初始化(一定要明白的干货)
首先,什么是类的加载?类的加载由类加载器执行.该步骤将查找字节码(classpath指定目录),并从这些字节码中创建一个Class对象.Java虚拟机为每种类型管理一个独一无二的Class对象.也就是 ...
- 2017-2018 ACM-ICPC Southeast Regional Contest (Div. 1)
A. Ducks in a Row 当$n\times k>|S|$时,显然无解. 否则最优解中翻转的区间一定两两不相交,设$f[i][j][x][y]$表示考虑前$i$个位置,第$i$个位置翻 ...
- BZOJ3499 : PA2009 Quasi-template
建立后缀树,用线段树合并求出每个节点子树内部最靠前和最靠后的后缀位置以及相邻后缀距离的最大值,同时求出每个子串能完整匹配的最长后缀的长度. 对于一个子串,如果其长度不小于相邻后缀距离的最大值,且最靠后 ...