前言:
要想创建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/
第二步:下载完成后,安装即可。
安装cnpm
第一步:打开cmd输入node -v 查看node是否存在。
node -v
第二步:安装淘宝镜像
npm install -g cnpm -registry=https://registry.npm.taobao.org
第三步:输入cnpm -v 查看cnpm是否存在
cnpm -v
安装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打开
第二步:在cmd中输入vue create 项目名称,其中项目名称不能有大写
vue create vue_element
第三步选择最后一个,默认配置
勾选需要使用的插件。注意:空格为选择或取消,回车为下一步
这里默认1.2.5.6.7,选择后回车。什么意思自己百度!
第四步:这里选择vue版本我这里选择2.x,流弊的可以选择3.x
第五步:路由器是否使用历史模式。要吧。。大概
第六步:选择CSS预处理器,这里选择Less
第七步:你喜欢将Babel、ESLint等的配置放在哪里?我喜欢放在package.json
第八步:是否将此保存为将来项目的预设?不用,至少现在不用。
完成后开始安装。。。。
稍等片刻安装完成。。。
第九部:查看vue_element文件夹内是否有文件
以上是创建vue项目全过程。
安装element
第一步:element是在vue项目中进行安装以及配置的。则用idea打开项目刚刚创建的vue项目
第二步:这里使用npm进行安装,在idea的Terminal(命令框)输入下列命令:
npm i element-ui -S
开始下载element依赖
第三步:下载完成后在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)
});
!!在这里已经按照完成了。以下是测试
测试第一步:在这里我们加下列语句:
<el-button type="primary">有没有效果呀</el-button>
测试第二步:编辑完成后回到Terminal中输入下列命令
#安装依赖
npm install
#运行vue项目
npm run serve
测试第三步:运行起来后点击上面的蓝色链接。如果是下列样式则表示安装成功呐。。
补充:如果发现vue后缀文件没有图标,且代码没有高亮。则像下列情况:
第一步:则检查idea中的vue.js插件是否安装:(此界面在菜单栏中的file下的Settings里的Plugins中)
我这里也没有
第二步:安装vue.js插件:点击MarKetplace搜索vue.js点击install安装。顺便element也一起安装。好东西!安装完成后重启软件即可。
如果下载慢就慢慢等,如果有梯子就挂上!
安装好就正常了:
后期检查:
如果发现在创建项目中报错(脚手架类问题),则在命令提示符中用下列代码以此检查:
#按照按照流程依次排查node.js-->cnpm-->vue/cli-->vue项目-->elemen
#node.js(注意要8.9及以上版本)
node -v
#cnpm
cnpm -v
#vue/cli
vue --version
element检查就观察在编写element代码时是否有联想即可。