一键生成小程序_详解从新建vue项目到引入组件Element的方法

  • 栏目:行业动态 时间:2021-01-11 14:52 分享新闻到:
<返回列表

详解从新建vue项目到引入组件Element的方法       本篇文章主要介绍了详解从新建vue项目到引入组件Element的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了从新建vue项目到引入组件Element以及Error ponent报错解决,分享给大家

一、新建项目

1.打开cmd,运行:vue init webpack Vue-Demo

2.运行:cd Vue-Demo进入这一级
3.运行:npm install
4.运行:npm run dev

如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js

解释:1.将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路

径以 ' / ' 开头,那么在本地是无法找到对应文件。所以如果需要在本地打开打包后的文件,

就得修改文件路径。

2.将端口号改为不常用的端口。

显示页面如下:

项目新建完成。

二、引入Element

1.打开cmd,在当前目录中运行: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 'element-ui/lib/theme-default/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)
new Vue({
 el: '#app',
 router,
 template: ' App/ ',
 components: { App }

3.然后在.vue文件里就直接可以用了

ponents/Hello.vue做一下修改

 template 
 div 
 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 ponent only -- 
 style scoped 
h1, h2 { 
 font-weight: normal; 
ul { 
 list-style-type: none; 
 padding: 0; 
li { 
 display: inline-block; 
 margin: 0 10px; 
 color: #42b983; 
 /style 

运行:npm run dev

你将看到如下页面:

成功的引入了Element!!

更多样式请参考:

凡科抠图:

看了一些资料,有的引入之后会出现

报错:Error ponent

原因如下:

Vue 2.1.5 将 _h 重命名为 _c,而 piler 编译的,导致新版 runtime 无法运行 Element。目前的解决方案是锁定 Vue 的版本为 2.1.4

锁定vue相关版本

npm remove vue #卸载相关的版本

重新安装一下版本:

"piler": "2.1.4" "vue-loader": "10.0.0" "vue": "2.1.4"

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


分享新闻到:

更多阅读

一键生成小程序_详解从新建vue项目到引入

行业动态 2021-01-11
详细说明重新建vue新项目到引进部件Element的方式 文中详细介绍了重新建vue新项目到引进...
查看全文

微信小程序系统软件_JS求Number类型数组中

行业动态 2021-01-08
JS求Number种类数字能量数组中较大原素方式 本文关键详细介绍了怎样用JS求Number种类数字...
查看全文

如何发布小程序_React Hooks的深化了解与使

行业动态 2021-01-08
React Hooks的深层次了解与应用 本文关键详细介绍了React Hooks的深层次了解与应用,网编感...
查看全文
返回全部新闻


区域站点: 南丰县h5和小程序有什么区别   南宫市h5微信   囊谦县h5免费   南和县h5抽奖大转盘制作   南华县h5和小程序有什么区别   南江县h5微信   南京市h5免费   南靖县h5抽奖大转盘制作   南康市h5和小程序有什么区别   南乐县h5微信   南陵县h5免费   南宁市h5抽奖大转盘制作   南平市h5和小程序有什么区别   南皮县h5微信   南市区h5免费   南通市h5抽奖大转盘制作   南投县h5和小程序有什么区别   南雄市h5微信   南溪县h5免费   南阳市h5抽奖大转盘制作   南漳县h5和小程序有什么区别   南召县h5微信   南郑县h5免费   那坡县h5抽奖大转盘制作   那曲县h5和小程序有什么区别   纳雍县h5微信   讷河市h5免费   内黄县h5抽奖大转盘制作   内江市h5和小程序有什么区别   内丘县h5微信   内乡县h5免费   嫩江市h5抽奖大转盘制作   聂荣县h5和小程序有什么区别   尼玛县h5微信   尼木县h5免费   宁安市h5抽奖大转盘制作   宁波市h5和小程序有什么区别   宁城县h5微信   宁德市h5免费   宁都县h5抽奖大转盘制作   宁国市h5和小程序有什么区别   宁海县h5微信   宁化县h5免费   宁晋县h5抽奖大转盘制作   宁陵县h5和小程序有什么区别   宁明县h5微信   宁南县h5免费   宁强县h5抽奖大转盘制作   宁陕县h5和小程序有什么区别   宁武县h5微信   宁乡市h5免费   宁阳县h5抽奖大转盘制作   宁远县h5和小程序有什么区别   农安县h5微信   磐安县h5免费   盘锦市h5抽奖大转盘制作   盘山县h5和小程序有什么区别   磐石市h5微信   盘州市h5免费   蓬安县h5抽奖大转盘制作   澎湖县h5和小程序有什么区别   蓬莱市h5微信   彭山县h5免费   蓬溪县h5抽奖大转盘制作   彭阳县h5和小程序有什么区别   彭泽县h5微信   彭州市h5免费   偏关县h5抽奖大转盘制作   平安县h5和小程序有什么区别   平昌县h5微信   平定县h5免费   屏东县h5抽奖大转盘制作   平度市h5和小程序有什么区别   平果县h5微信   平和县h5免费   平湖市h5抽奖大转盘制作   平江县h5和小程序有什么区别   平乐县h5微信   平凉市h5免费   平利县h5抽奖大转盘制作   平罗县h5和小程序有什么区别   平陆县h5微信   屏南县h5免费   平泉市h5抽奖大转盘制作   屏山县h5和小程序有什么区别   平顺县h5微信   平塘县h5免费   平潭县h5抽奖大转盘制作   平武县h5和小程序有什么区别   萍乡市h5微信   平乡县h5免费   平阳县h5抽奖大转盘制作   平遥县h5和小程序有什么区别   平阴县h5微信   平邑县h5免费   平远县h5抽奖大转盘制作   平舆县h5和小程序有什么区别   皮山县h5微信   普安县h5免费   浦北县h5抽奖大转盘制作   浦城县h5和小程序有什么区别   普洱市h5微信   普格县h5免费   浦江县h5抽奖大转盘制作   普兰县h5和小程序有什么区别   普宁市h5微信   莆田市h5免费   迁安市h5抽奖大转盘制作   乾安县h5和小程序有什么区别   潜江市h5微信   潜山市h5免费  

友情链接: 月福步宜 微信小游戏h5 超恒鑫电子 h5免费制作 h5商城 h5 大转盘 手机版

Copyright © 2002-2020 h5免费_h5抽奖大转盘制作_h5和小程序有什么区别_h5微信_手机抽奖小程序 版权所有 (网站地图) 备案号:粤ICP备10235580号