vscode创建vue+ElementUI项目

向右看齐 2023-09-26 16:21 132阅读 0赞

**一、初步创建vue项目，运行**

**参考：[VUE 使用 vue create 命令 创建 vue2.0 项目][VUE _ vue create _ _ vue2.0]**

**二、创建配置router路由信息**

1. 执行命：**npm install vue-router@3.5.2** 进行安装。这里安装3.5.2的版本，如果不小心执行了安装了最新版本4.x.x，可使用 **npm uninstall vue-router -S**卸载最新版本。最新版本可能导致配置路由的时候出现export 'default' (imported as 'VueRouter') was not found in 'vue-router' ....的错误。

2. 在src下创建一个router文件夹，并创建 **index.js**，并导入默认的HolloWorld页面，配置为默认访问路径

> import Vue from "vue";
> 
> import VueRouter from 'vue-router'
> 
> import HelloWord from "../components/HelloWorld.vue";
> 
> // 使用路由
> 
> Vue.use(VueRouter);
> 
> // 创建VueRouter的实例
> 
> const router = new VueRouter(\{
> 
> mode:'history',
> 
> routes: \[
> 
> \{
> 
> path: "/",
> 
> name:'home',
> 
> component: HelloWord,
> 
> \}
> 
> \]
> 
> \})
> 
> // 导入路由实例
> 
> export default router

3.修改main.js，把router对象注册到vue中。

> import Vue from 'vue'
> 
> import App from './App.vue'
> 
> // 引入导出的路由
> 
> import router from './router/index'
> 
> Vue.config.productionTip = false
> 
> new Vue(\{
> 
> // 注册路由
> 
> router,
> 
> render: h => h(App),
> 
> \}).$mount('\#app')

4.修改App.vue页面

> <template>
> 
> <div id="app">
> 
> <router-view/>
> 
> </div>
> 
> </template>
> 
> <script>
> 
> export default \{
> 
> name: 'App'
> 
> \}
> 
> </script>

5.访问项目[http://localhost:8080/][http_localhost_8080] 正常打开

**![46f72a34651d4c3c9bbd09044d011e02.png][]**

**三、创建新的访问测试页面Index**

1. 在components文件下创建Index.vue页面，后续其他公共组件也同样添加在该components目录下，如：自定义的翻页组件、弹窗组件、Echarts组件等。如果报错 error Component name "Index" should always be multi-word vue/multi-word-component-names，只需在**.eslintrc.js**文件中添加如下代码即可

> // 关闭组件命名规则
> 
> "vue/multi-word-component-names":"off"

Index.vue

> <template>
> 
> <div>版本号：\{ \{version\}\}</div>
> 
> </template>
> 
> <script>
> 
> export default \{
> 
> name: 'Index',
> 
> data () \{
> 
> return \{
> 
> // 版本号
> 
> version: '3.3.0'
> 
> \}
> 
> \},
> 
> methods: \{
> 
> goTarget (href) \{
> 
> window.open(href, '\_blank')
> 
> \}
> 
> \}
> 
> \}
> 
> </script>

2. 在router下的index.js添加路由 ![7581fd06ba27428da601aa5286cdb199.png][]

3. 访问[http://localhost:8080/index][http_localhost_8080_index]测试 ![1052a67ea0d14a29bbb2b8909bac0e60.png][]

**四、引入ElementUI框架**

1.在终端执行指令：**npm i element-ui -S** 或 **`npm install element-ui --save`**

2. 在main.js中引入

> // 导入element-ui
> 
> import ElementUi from 'element-ui'
> 
> import 'element-ui/lib/theme-chalk/index.css'
> 
> Vue.use(ElementUi)

[VUE _ vue create _ _ vue2.0]: https://blog.csdn.net/weixin_43221910/article/details/125097644
[http_localhost_8080]: http://localhost:8080/
[46f72a34651d4c3c9bbd09044d011e02.png]: https://img-blog.csdnimg.cn/46f72a34651d4c3c9bbd09044d011e02.png
[7581fd06ba27428da601aa5286cdb199.png]: https://img-blog.csdnimg.cn/7581fd06ba27428da601aa5286cdb199.png
[http_localhost_8080_index]: http://localhost:8080/index
[1052a67ea0d14a29bbb2b8909bac0e60.png]: https://img-blog.csdnimg.cn/1052a67ea0d14a29bbb2b8909bac0e60.png