基于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 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 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
php四种基础算法代码实例
2013/10/29 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python实现dict版图遍历示例
2014/02/19 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python实现扫雷游戏
2020/03/03 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
python中np是做什么的
2020/07/21 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
局域网标准
2016/09/10 面试题
保密工作责任书
2014/04/16 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
水电工岗位职责
2015/02/14 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript