基于Vue和Element-Ui搭建项目的方法


Posted in Javascript onSeptember 06, 2019

首先要求事先安装node和npm

没有安装的自行百度或在论坛里面搜索!

提示:在命令行分别输入node -v(node和-v之间有个空格) 和npm -v(同样有个空格)可查看当前的node和npm版本

创建vue项目

1.创建一个项目文件夹,记住文件夹路径,如我的是F:\AppCode

2.打开cmd命令通过cd指令进入到刚才创建的文件夹路径F:\AppCode。

输入npm install -g cnpm ?registry=https://registry.npm.taobao.org安装淘宝镜像

3.继续输入npm install -g vue-cli安装全局vue-cli,在命令行中输入vue,出来vue的信息说明安装成功。

4.输入vue init webpack test安装 webpack 模板的新项目(test是我的项目名也是文件夹名,可根据实际修改好像不能有大写字母,如有大写字母会要求重新输入项目名,所以最好输入小写保证二者一致,方便操作)此时一路回车

5.输入cd test进入test文件夹输入 npm install

6.输入 npm run dev 运行项目,这个时候命令窗口给出http://localhost:8080将其在浏览器打开,至此vue项目创建完成

引入elementUi

1.继续打开cmd 利用cd命令进如我们创建的项目文件夹F:\Appcode\test

2.输入npm i element-ui -S)安装elementUi(注意空格和大写S)

3.安装完成后用WebStorm或者HBuiderX打开我们的项目,找到src目录下的main.js文件将其修改为:也就新增了3条语句用于引用elementUI

// 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' //new
import ‘element-ui/lib/theme-chalk/index.css' //new
Vue.config.productionTip = false
Vue.use(ElementUI) //new

/*eslint-disable no-new */
new Vue({
el: ‘#app',
router,
components: { App },
template: ‘'
})

4.此时elementUI已经导入成功可以在src/components/Hello.vue中引入一个按钮以查看样式是否成功

{{ msg }}
Essential Links

<el-button type="primary">主要按钮</el-button>  //这个就是element提供的按钮

5.运行一下:cmd进入项目文件夹F:\AppCode\test运行一下npm run dev (webstorm 可以利用快捷键alt + F12快速执行npm run dev , HBuiderX 可点击运行到浏览器图标(有点像播放按钮的那个)快速执行npm run dev 这样就不需要cd指令进入项目文件夹拉) 6. 但是这个时候你会发现会报http://eslint.org/docs/rules/indent错误!!!! ## http://eslint.org/docs/rules/indent解决

错误原因是Vue对语法比较严格,而eslint是一个语法检查工具,对语法要求极其苛刻严格,于是就error了
解决之道是关闭eslint的语法规则,找到build/webpack.base.conf.js将eslint相关语法注释或删除即可。

1.在test文件夹下找到build文件夹

2.选择build中的webpack.base.conf.js文件进入修改,将其中…(config.dev.useEslint ? [createLintingRule()] : []),语句注释掉即可。

3.手残党也可直接拷贝下面内容替换webpack.base.conf.js中我内容:

‘use strict'
const path = require(‘path')
const utils = require('./utils')
const config = require('…/config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
return path.join(__dirname, ‘…', dir)
}

const createLintingRule = () => ({
test: /.(js|vue)$/,
loader: ‘eslint-loader',
enforce: ‘pre',
include: [resolve(‘src'), resolve(‘test')],
options: {
formatter: require(‘eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})

module.exports = {
context: path.resolve(__dirname, ‘…/'),
entry: {
app: ‘./src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: ‘[name].js',
publicPath: process.env.NODE_ENV === ‘production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', ‘.vue', ‘.json'],
alias: {
'vueKaTeX parse error: Expected 'EOF', got '}' at position 58: …ve('src'), }̲ }, module:…/,
loader: ‘vue-loader',
options: vueLoaderConfig
},
{
test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 144: …lient')] }̲, { …/,
loader: ‘url-loader',
options: {
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?KaTeX parse error: Expected 'EOF', got '}' at position 157: … } }̲, { …/,
loader: ‘url-loader',
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: ‘empty',
fs: ‘empty',
net: ‘empty',
tls: ‘empty',
child_process: ‘empty'
}
}

4.再次运行一下:cmd进入项目文件夹F:\AppCode\test运行一下npm run dev (webstorm 可以利用快捷键alt + F12快速执行npm run dev , HBuiderX 可点击运行到浏览器图标(有点像播放按钮的那个)快速执行npm run dev 这样就不需要cd指令进入项目文件夹拉),错误解决命令串口给出如下端口http://localhost:8080将其在浏览器打开。

5.可以看到屏幕中出现了我们添加的主要按钮,操作完成!

总结

以上所述是小编给大家介绍的基于Vue和Element-Ui搭建项目的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
jQuery事件用法详解
Oct 06 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
微信小程序 搜索框组件代码实例
Sep 06 #Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 #Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 #Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 #Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 #Javascript
layui 弹出删除确认界面的实例
Sep 06 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
canvas时钟效果
2017/02/16 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
详解vue.js之props传递参数
2017/12/12 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
python实现上传下载文件功能
2020/11/19 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python程序暂停的正常处理方法
2019/11/07 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis