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

2023-08-15 03:00:04 249

首先要求事先安装node和npm

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

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

创建vue项目

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

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

输入npminstall-gcnpm–registry=https://registry.npm.taobao.org安装淘宝镜像

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

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

5.输入cdtest进入test文件夹输入npminstall

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

引入elementUi

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

2.输入npmielement-ui-S）安装elementUi(注意空格和大写S)

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

//TheVuebuildversiontoloadwiththeimportcommand
//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.
importVuefrom‘vue'
importAppfrom‘./App'
importrouterfrom‘./router'
importElementUIfrom‘element-ui'//new
import‘element-ui/lib/theme-chalk/index.css'//new
Vue.config.productionTip=false
Vue.use(ElementUI)//new

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

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

{{msg}}
EssentialLinks

主要按钮//这个就是element提供的按钮

5.运行一下：cmd进入项目文件夹F:\AppCode\test运行一下npmrundev(webstorm可以利用快捷键alt+F12快速执行npmrundev，HBuiderX可点击运行到浏览器图标(有点像播放按钮的那个)快速执行npmrundev这样就不需要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中我内容：

‘usestrict'
constpath=require(‘path')
constutils=require('./utils')
constconfig=require('…/config')
constvueLoaderConfig=require('./vue-loader.conf')

functionresolve(dir){
returnpath.join(__dirname,‘…',dir)
}

constcreateLintingRule=()=>({
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:{
'vueKaTeXparseerror:Expected'EOF',got'}'atposition58:…ve('src'),}̲},module:…/,
loader:‘vue-loader',
options:vueLoaderConfig
},
{
test:/.jsKaTeXparseerror:Expected'EOF',got'}'atposition144:…lient')]}̲,{…/,
loader:‘url-loader',
options:{
limit:10000,
name:utils.assetsPath(‘img/[name].[hash:7].[ext]')
}
},
{
test:/.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?KaTeXparseerror:Expected'EOF',got'}'atposition157:…}}̲,{…/,
loader:‘url-loader',
options:{
limit:10000,
name:utils.assetsPath(‘fonts/[name].[hash:7].[ext]')
}
}
]
},
node:{
//preventwebpackfrominjectinguselesssetImmediatepolyfillbecauseVue
//sourcecontainsit(althoughonlyusesitifit'snative).
setImmediate:false,
//preventwebpackfrominjectingmockstoNodenativemodules
//thatdoesnotmakesensefortheclient
dgram:‘empty',
fs:‘empty',
net:‘empty',
tls:‘empty',
child_process:‘empty'
}
}

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

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

总结

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

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

热门推荐

随机推荐