element插件安装教程(element插件安装方法)

一、终于到了我们安装elementUI的时候了。继续在VSCode中构建一个新的终端，然后通过以下命令安装它：
NPI元素-UI -S Why-S？即- save包的名字会注册在package.json的依赖项中，这个包的依赖项在生产环境中仍然存在。安装后呢？在项目中使用它之前，我们必须导入它。我们可以在main.js中做一个全局引用：
从“vue”导入vue“从导入应用程序”。/app . vue ‘//Introduce Element ii从“element-UI”导入元素UI；导入“element-ui/lib/theme-chalk/index . CSS”；//样式文件必须导入到vue . config . production tip=false vue . use(element ui)new vue({ render 3360h=h(app)，})。$ mount (‘# app ‘)，以便可以全局导入它。如果实际开发使用的UI框架插件不多，也可以按需导入。我们到下面去。
从“element-ui”导入{ Message }；Vue.use(Message)是引入一个消息弹出的功能，也就是element中的内容只能用这个，还是比较麻烦的。好了，导入加载完毕，我们来测试一下，看看是否能用。将按钮组件添加到App.vue文件中，然后保存它以供查看。您可以看到按钮组件已经成功呈现在网页中。
金属试样
二。安装路由由于Vue在开发时缺乏路由支持，官方添加了vue-router插件。Vue的单页应用程序是基于路由和组件的。路由用于设置访问路径以及映射路径和组件。通过以下命令在终端中安装：
npinstallvue-router-s安装完成后，也将其挂载到main.js中。在我们的项目src目录中创建一个路由器文件夹来存储路由映射文件。在router文件夹下创建index.js和routers.js，分别用于初始化路由和配置路由映射。代码如下：index.js:
从“Vue”导入Vue；从“vue-router”导入路由器；从’导入常量。/路由器’；const original push=router . prototype . push；router . prototype . push=function(location){ return original push . call(this，location)。catch(err=err)；};Vue.use(路由器)；const create Router=()=new Router({ scroll behavior :()=({ y : 0 })，routes : constant Router })const Router=create Router()导出函数reset Router(){ const new Router=create Router()Router . matcher=new Router . matcher }/* * * Global guard * @ func before each * @ param { object }到传入目的地route object * @param {object}从当前导航即将离开route * @func下一步到下一个钩子在/* * *全局post book * @ func after each * @ param { object }到达目的地route object * @ param { object } formThe当前导航即将离开route */router.aftereach ((to，form)={ })；导出默认路由器；routers.js:
/* * *逐个导出模块*/export const常量routes=[{path:’/’，redirect3360’/home’}，] export default [.不变路线，]；然后在main.js中进行配置：
从“vue”导入vue“从导入应用程序”。/app . vue ‘//Introduce Element ii从“element-UI”导入元素UI；导入“element-ui/lib/theme-chalk/index . CSS”；//样式文件必须引入//load route import router from’。/router/index . js ‘；vue . config . production tip=false vue . use(element ui)new vue({ router，render3360h=h (app)，})。$ mount (‘# app ‘)可能会在保存后报告ESLint检查规则的错误：
先不配置代码验证规则，后面再单独说代码编写规范。要删除代码检查，请在package.json文件的eslintConfig字段中添加这些代码，然后重新启动项目。
rules ‘ : { ‘ generator-star-spacing ‘ : ‘ off ‘，’ no-tabs’: ‘off ‘，’ no-unused-vars’: ‘off ‘，’ no-console’: ‘off ‘，No-regular-white space’ 3360′ off ‘，’ no-debugger’ 3360′ off’}然后我们的路由安装就完成了。
三。安装vuex在开发大型项目的过程中，仍然会经常用到vuex。关于vuex的官方解释是，Vuex是一个插件，专门用于管理vue.js应用中的状态。他的角色是将应用程序中的所有状态放在一起，并集中管理它们。描述可能晦涩难懂，我们可以边用边学。通过以下命令在终端中安装它：
Npm install vuex – S静静地等待安装完成。我们会在Vue中加载，步骤和加载路线差不多。现在，在src目录中创建store文件夹，然后创建index.js
从“Vue”导入Vue；从“Vuex”导入Vuex；const modules files=require . context(‘。/modules ‘，true，/\。js $/)const modules=modules files . keys()。reduce((modules，modulepath)={ const modulename=modulepath.replace(/^\.\/(.*)\.\w $/，’ $ 1 ‘)const value=modules files(module path)modules[moduleName]=value . default return modules }，{ })vue . use(Vuex)；导出默认的新Vuex。存储({ modules : modules })；然后在store文件夹下创建modules文件夹，主要用于存储状态数据模块文件，所以不需要先创建文件：
然后在main.js中加载vuex，
从“vue”导入vue“从导入应用程序”。/app . vue ‘//Introduce Element ii从“element-UI”导入元素UI；导入“element-ui/lib/theme-chalk/index . CSS”；//样式文件必须引入//load route import router from’。/router/index . js ‘；//从’加载vueximport存储区。/store/index . js ‘ vue . config . production tip=false vue . use(element ui)new vue({ store，router，render3360h=h (app)，})。$ mount(# app)加载后，其实还有一个插件是需要的，就是关于网络请求的，不过这篇文章已经有很多内容了。稍后，单独的一章将帮助您了解如何打包网络请求以及安装哪个插件。好了，本章到此为止。下一章将谈到改进项目的结构。
作者：padding2020链接：https://www.cnblogs.com/liao123/p/15612007.html