基于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 相关文章推荐
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
elementui的el-popover修改样式不生效的解决
Jun 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
php empty函数 使用说明
2009/08/10 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
js计数器代码
2006/11/04 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
在python win系统下 打开TXT文件的实例
2018/04/29 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python字符串反转的四种方法详解
2019/12/02 Python
python代码能做成软件吗
2020/07/24 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
体育教育专业自荐信范文
2013/12/20 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
生态养殖创业计划书
2014/05/06 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript