vue与元素ui结合的示例

本文主要是关于创建一个vue项目并结合饥饿框架元素-ui。

1.首先创建vue项目，我要把项目放在e盘下：e : \ e : \ Work \ register project；

进入该目录的命令行：

基于webpack模板创建新项目

(1)vue init webpack寄存器(项目名称)

按回车键需要是，不需要输入n再按回车键。

创建完成：在目录中可见

运行：命令行进入新创建的目录：cd寄存器

运行：npm运行开发

成功：

在浏览器中，输入：http://localhost:8080/我的是http://localhost33608081/(那是因为我又打开了一个vue项目，端口80被占用了，所以第一个一般不会被占用。只需输入http://localhost33608080/)。

此界面的出现表明vue项目已成功创建：

现在vue引入了Element

1.打开cmd，进入目前刚创建的vue项目目录

在当前目录下运行：npm i元素-ui -S

我用webstrom打开刚刚创建的项目；文件打开

如图所示：

更改项目目录中的main.js文件；

原始main.js文件：

替换为：

从“vue”导入Vue从“App”导入。/App“从导入路由器”。/router ' import element ui from ' element-ui ' import ' element-ui/lib/theme-粉笔/> index . CSS ' vue . config . production tip=false vue . use(element ui)如图所示：

3.然后可以直接在。vue文件

例如，在src/components/hello.vue中进行修改。

模板div class=' hello' h1 {{msg}}/h1h2必要链接/h2el-button默认按钮/el-buttonel-button类型=' primary '主按钮/El-button El-button类型='text '文本按钮/El-button/div/templatescript export默认{name: 'hello '，data () {return {msg: '欢迎使用您的vue . js App ' } }/script！-添加“scoped”属性以将CSS限制为此组件-样式scopedh1，H2 { font-weight : normal；} ul { list-style-type : none；padd : 0；}li {display:内联块；margin: 0 10px} a { color: # 42b983}/style run: npm run dev(webstrom可以按Alt F12键并输入npm run dev)

您将看到以下页面：

元素已成功引入！

注意以下凹坑：

1.是否引入js和css文件

Css文件是静态文件地址，安装教程的安装地址不会出错

2.检查节点版本，节点版本是否过低。

3.检查下面的npm版本是否太低

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。