Vue2.x+ElementUI搭建项目（待修正）

水深无声 2022-10-17 04:12 291阅读 0赞

### Vue2.x+ElementUI搭建项目 ###

*   *  第一步：创建Vue新项目
     *  第二步：安装Axios用于请求API
     *  第三步：项目引入ElementUI（桌面端）组件
     *  第四步：总结

## 第一步：创建Vue新项目 ##

*  安装Vue脚手架Cli执行命令：npm install -g @vue/cli ；
 *  通过脚手架，执行Vue命令：vue create 项目名 ~创建项目；
 *  安装路由，通过npm安装：npm install vue-router --save ；
 *  创建路由文件，并将其路径配置到全局入口main.js实例中；

> \*这里路由配置文件router.js是建在src目录下，取名router.js 与main.js同级（网上看到部分作者是在src目录下创建一个router文件夹新建一个index.js）。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]  
> \*将创建好的路由文件，配置到项目入口文件main.js中：（注：main.js中默认new Vue实例中的写法，会有一定的问题，需要按照下面做修改！）![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]  
> 最后，创建新的页面组件（如图我创建的：index）并按上图配置后，即可使用浏览器输入不同的path，访问不同的组件页面。

## 第二步：安装Axios用于请求API ##

*  使用npm包管理器进行安装axios：npm install axios ;
 *  安装vue-axios：npm install --save axios vue-axios ;

> 在全局入口文件main.js中配置![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]

## 第三步：项目引入ElementUI（桌面端）组件 ##

*  通过npm安装，执行命令：npm install elemnt-ui --save-dev

> 在全局入口文件main.js中引入组件及样式  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]

## 第四步：总结 ##

> 1.package.json中查看项目已安装的插件的版本；  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]  
> 2. package.json中加入rules（规则）  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 5]  
> **规则代码：**  
> “rules”: \{  
> “generator-star-spacing”: “off”,  
> “no-tabs”: “off”,  
> “no-unused-vars”: “off”,  
> “no-console”: “off”,  
> “no-irregular-whitespace”: “off”,  
> “no-debugger”: “off”  
> \}

*  A问题：在执行完axios安装命令后，终端和package.json文件同时可见axios的版本号，但是项目重新加载时报axios模块未找到，怎么解决？
 *  A答案：网上有人推荐，将 node\_modules文件夹删除（npm安装后生成的依赖文件），重新执行安装插件命令！
 *  B答案：自己多次实践所得，重启项目！重启编译器！为什么？因为有时候执行npm安装插件后，编译器并不能完全很有效的检测到本地已安装的依赖文件，就很傻的告诉我们，你这个文件未找到！（在angular中创建一个新的页面组件，若不重启项目，死活检测不到那个页面组件，其他框架未知。）此时你就需要通过项目重启或编译器重启，来迫使编译器去重新检测本地项目内的依赖文件！不到最后，坚决不使用A答案的做法！当然如果你的依赖文件小，可能感觉不到啥，若是你恰好使用Angular为基础的项目框架，你不管删依赖文件夹或重新使用npm安装插件，特别，特别费时间！亲身体会！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20221014/f55ad9a18d3c4722b8e06937c4527b88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20221014/d9067c9b6cea48d8ada6ed0f2a5989d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]: /images/20221014/7f27c8b8145a4d7db76a66033fcef628.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]: /images/20221014/4c0ef763f5014c68ae34f0f3b42384cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]: /images/20221014/553f637c472b4677bf19e8316d9daf68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 5]: /images/20221014/ab770b7e04f5436fa7a35a75a453ae7c.png