当前位置: 首页>编程语言>正文

element dialog不需要遮罩层 element必须要vue么

前言:

要想创建vue项目必须使用vue/cli(脚手架)进行vue项目的创建。

且安装vue-cli的前提是基于已经安装了node.js(Node.js v8.9 或更高版本)和cnpm的基础上。

其中一些vue依赖包可能要依赖python,最好把python安装上吧,以免报错。

element安装是在vue项目中进行配置及安装。

所以按照流程node.js(Node.js v8.9 或更高版本)–>cnpm–>vue/cli–>vue项目–>elemen安装步骤,其中缺一不可!

安装node.js

第一步:https://nodejs.org/zh-cn/download/

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端,第1张

第二步:下载完成后,安装即可。

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_02,第2张

安装cnpm

第一步:打开cmd输入node -v 查看node是否存在。

node -v

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_elementui_03,第3张

第二步:安装淘宝镜像

npm install -g cnpm -registry=https://registry.npm.taobao.org

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_开发语言_04,第4张

第三步:输入cnpm -v 查看cnpm是否存在

cnpm -v

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_golang_05,第5张

安装vue/cli(脚手架)

Node 版本要求:Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。

第一步:使用下列命令安装:

npm install -g @vue/cli

第二步:安装完成后用下列命令来检查其版本是否正确:

vue --version

如需升级全局的 Vue CLI 包,运行下列命令:

npm update -g @vue/cli

创建vue项目

在vue/cli安装成功的前提创建vue项目

第一步:在要创建的目录下用cmd打开

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_06,第6张

第二步:在cmd中输入vue create 项目名称,其中项目名称不能有大写

vue create vue_element

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_golang_07,第7张

第三步选择最后一个,默认配置

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_08,第8张

勾选需要使用的插件。注意:空格为选择或取消,回车为下一步

这里默认1.2.5.6.7,选择后回车。什么意思自己百度!

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_09,第9张

第四步:这里选择vue版本我这里选择2.x,流弊的可以选择3.x

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_elementui_10,第10张

第五步:路由器是否使用历史模式。要吧。。大概

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_11,第11张

第六步:选择CSS预处理器,这里选择Less

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_开发语言_12,第12张

第七步:你喜欢将Babel、ESLint等的配置放在哪里?我喜欢放在package.json

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_13,第13张

第八步:是否将此保存为将来项目的预设?不用,至少现在不用。

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_14,第14张

完成后开始安装。。。。

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_elementui_15,第15张

稍等片刻安装完成。。。

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_16,第16张

第九部:查看vue_element文件夹内是否有文件

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_elementui_17,第17张

以上是创建vue项目全过程。

安装element

第一步:element是在vue项目中进行安装以及配置的。则用idea打开项目刚刚创建的vue项目

第二步:这里使用npm进行安装,在idea的Terminal(命令框)输入下列命令:

npm i element-ui -S

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_elementui_18,第18张

开始下载element依赖

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_golang_19,第19张

第三步:下载完成后在main.js中添加下列内容:(main.js在src目录下)[如果发现代码没高亮。看下面的补充!!]

import Vue from 'vue';
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_20,第20张

!!在这里已经按照完成了。以下是测试

测试第一步:在这里我们加下列语句:

<el-button type="primary">有没有效果呀</el-button>

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_21,第21张

测试第二步:编辑完成后回到Terminal中输入下列命令

#安装依赖
npm install 
#运行vue项目
npm run serve

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_22,第22张

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_23,第23张

测试第三步:运行起来后点击上面的蓝色链接。如果是下列样式则表示安装成功呐。。

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_24,第24张

补充:如果发现vue后缀文件没有图标,且代码没有高亮。则像下列情况:

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_25,第25张

第一步:则检查idea中的vue.js插件是否安装:(此界面在菜单栏中的file下的Settings里的Plugins中)

我这里也没有

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_elementui_26,第26张

第二步:安装vue.js插件:点击MarKetplace搜索vue.js点击install安装。顺便element也一起安装。好东西!安装完成后重启软件即可。

如果下载慢就慢慢等,如果有梯子就挂上!

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_后端_27,第27张

安装好就正常了:

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_vue_28,第28张

后期检查:

如果发现在创建项目中报错(脚手架类问题),则在命令提示符中用下列代码以此检查:

#按照按照流程依次排查node.js-->cnpm-->vue/cli-->vue项目-->elemen
#node.js(注意要8.9及以上版本)
node -v
#cnpm
cnpm -v
#vue/cli
vue --version

element dialog不需要遮罩层 element必须要vue么,element dialog不需要遮罩层 element必须要vue么_golang_29,第29张

element检查就观察在编写element代码时是否有联想即可。



https://www.xamrdz.com/lan/5ts1941931.html

相关文章: