基于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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 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
js代码实现微博导航栏
2015/07/30 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
jquery对表单操作2
2011/04/06 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js脚本实现数据去重
2014/11/27 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
Ejb技术面试题
2015/04/29 面试题
出纳员岗位职责风险
2014/03/06 职场文书
我的中国心演讲稿
2014/09/04 职场文书
教师创先争优承诺书
2015/04/27 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书