vue的安装及element组件的安装方法

 更新时间:2018年03月09日 09:05:33   作者:北巷未寒  
下面小编就为大家分享一篇vue的安装及element组件的安装,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、新建vue项目

1、首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具

npm集成在node中的,所以直接输入npm-v查看npm的版本信息

2、npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。

3、在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好用npm安装,cnpm有时依赖下载不全,如果npm下载缓慢可以尝试cnpm安装依赖包。

4、安装vue-cli脚手架构建工具。在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

5、用vue-cli构建项目。选定目录,存放新建的项目

6、在桌面目录下,在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称。

7、运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

8、打开firstVue文件夹,项目文件如下所示。

9、安装依赖包(记住一定要在新建的项目文件夹目录下),通过npm install命令

10、安装好依赖后,运行项目,通过npm run dev实现,一般默认是8080端口,打开浏览器输入localhost:8080

11、8080端口如果被占用了,需要修改一下配置文件config/index.js

更改端口后显示这样:

二、下面引入Element

1、在当前目录下,运行:npm i element-ui -S

2、在src/main.js中添加代码(红色的)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'	//手动变红
import '../node_modules/element-ui/lib/theme-chalk/index.css'	//手动变红
//具体路径有的不同,vue运行报错请看第五点
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)	//手动变红
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

3、然后在.vue文件里就直接可以用了,如:在src/components/Hello.vue做一下修改

<template> 
 <div class="hello"> 
 <h1>{{ msg }}</h1> 
 <h2>Essential Links</h2> 
 <el-button>默认按钮</el-button> 
 <el-button type="primary">主要按钮</el-button> 
 <el-button type="text">文字按钮</el-button> 
 </div> 
</template> 
 
<script> 
export default { 
 name: 'hello', 
 data () { 
 return { 
 msg: 'Welcome to Your Vue.js App' 
 } 
 } 
} 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
h1, h2 { 
 font-weight: normal; 
} 
 
ul { 
 list-style-type: none; 
 padding: 0; 
} 
 
li { 
 display: inline-block; 
 margin: 0 10px; 
} 
 
a { 
 color: #42b983; 
} 
</style> 

4、再次运行

5、上述(3)有时会报错,一是查看element-ui的index.css路径是否正确,第二因为报错会显示找不到文件,需要在build/webpack.base.conf.js文件中添加一段代码,如下。

6、现在运行起来了

以上这篇vue的安装及element组件的安装方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决Vue.js Devtools未检测到Vue实例的问题

    解决Vue.js Devtools未检测到Vue实例的问题

    在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具,然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用,本文将详细解析这个问题,并提供相应的解决步骤与代码示例,需要的朋友可以参考下
    2024-01-01
  • vue如何实现关闭对话框后刷新列表

    vue如何实现关闭对话框后刷新列表

    这篇文章主要介绍了vue如何实现关闭对话框后刷新列表,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue子组件与父组件详细解析

    Vue子组件与父组件详细解析

    这篇文章主要介绍的是Vue子组件与父组件,什么是父组件,什么是子组件很多时候面对这个问题我们都会有所混淆,下面文章我们就来详细介绍,需要的朋友可以参考一下
    2021-10-10
  • vue自定义全局组件实现弹框案例

    vue自定义全局组件实现弹框案例

    这篇文章主要为大家详细介绍了vue自定义全局组件实现弹框案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue中rem与postcss-pxtorem的应用详解

    Vue中rem与postcss-pxtorem的应用详解

    这篇文章主要介绍了Vue中rem与postcss-pxtorem的应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue实现公共方法抽离

    vue实现公共方法抽离

    这篇文章主要介绍了vue实现公共方法抽离,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue2.0开发实践总结之入门篇

    vue2.0开发实践总结之入门篇

    这篇文章主要为大家总结了vue2.0开发实践之入门,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue如何使用CSS自定义变量

    Vue如何使用CSS自定义变量

    这篇文章主要介绍了Vue如何使用CSS自定义变量,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-05-05
  • 在vue中使用echarts实现上浮与下钻效果

    在vue中使用echarts实现上浮与下钻效果

    这篇文章主要介绍了在vue中使用echarts实现上浮与下钻效果,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue实现二维码的展示及下载功能

    Vue实现二维码的展示及下载功能

    这篇文章主要介绍了Vue实现二维码的展示及下载功能,其中downloadQRCode()函数中的url为要下载的文件的路径,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-05-05

最新评论