前端环境搭建(vue+Element框架搭建)_idea element依赖

前言：

要想创建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 
1

第二步：安装淘宝镜像

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

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

cnpm -v
1

安装vue/cli（脚手架）

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

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

npm install -g @vue/cli
1

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

vue --version
1

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

npm update -g @vue/cli
1

创建vue项目

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

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

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

vue create vue_element
1

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

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

这里默认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
1

开始下载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)
});
1
2
3
4
5
6
7
8
9
10
11

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

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

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

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

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

1
2
3
4
5

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

补充：如果发现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
1
2
3
4
5
6
7

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