当前位置：首页 > news >正文

Vue Web开发（一）

news 来源：原创 2025/7/5 18:48:53

1. 环境配置

1.1. 开发工具下载

1.1.1. HbuilderX

官网地址：https://uniapp.dcloud.net.cn/

1.1.2. Visual Studio Code

官网地址：https://code.visualstudio.com/Download

1.1.3. Node环境

官网地址：https://nodejs.cn/
正常软件安装下载即可，打开检cmd过安装包安装node环境会自带npm工具。
在这里插入图片描述

1.1.4. 安装cnpm

主要用来代替npm，因为npm下载速度过慢。

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

在这里插入图片描述

1.1.5. 安装cnpm

npm install -g yarn

在这里插入图片描述

1.1.6. 安装 vue-cli 脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。
（1）输入命令：cnpm install -g @vue/cli
在这里插入图片描述
（2）验证是否安装成功
注意是大写V，这里是脚手架版本，不是Vue版本，跟Vue2、Vue3无关。

1.2. 创建项目

（1） vue create 项目名称（不能有大写字符可以使用中划线或下划线）
在这里插入图片描述
（2）选择项目类型
成功后出现以下画面，我们选择Vue2。

项目创建完成后，会生成这些文件。package.json会存储我们下载的所有插件。

此处才是真正的Vue版本，cmd看到的是脚手架版本。
在这里插入图片描述

1.3. Element ui

Element ui 官方文档：Element - The world’s most popular Vue UI framework
在这里插入图片描述

1.3.1. 全局引入Element ui

安装npm i element-ui -S，-S等价于–save–dev
--save：将保存配置信息到pacjage.json。默认为dependencies节点中。
--dev：将保存配置信息devDependencies节点中。
在mian.js入口文件中引入，import引入Element ui和样式，并Vue.use全局使用。
在这里插入图片描述

main.js文件
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({el: '#app',render: h => h(App)
});

在这里插入图片描述

1.3.2. 按需引入Element ui

在这里插入图片描述

1.4. Vue路由使用

引入npm i vue-router@3.2.0，这里使用指定版本。
在这里插入图片描述
在根目录下新建router文件夹，router文件夹下新建router.js文件，所有路由逻辑待会编写在这个router.js文件。

首先引入vue和vue-router，此处注意大小写！！！new一个VueRouter并用router接收，这样做是为了方便向外暴露router，进行修改配置mode为history，以数组的形式传入路由相关信息，用routes接收。

router/router.js文件
import Vue from 'vue';
// 注意这里模块是小写vue
import VueRouter from 'vue-router';
import Home from '../view/Home.vue';
Vue.use(VueRouter)
// routes是一个数组
import Vue from 'vue';
// 注意这里模块是小写vue
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// routes是一个数组！！！！
const routes = [{path:'/',name:'Home',component:()=>import('../view/Home')//这个Home.vue页面待会会新建}
]
const router = new VueRouter({mode:'history',routes
})
export default router;

在根目录下新建view文件夹，view文件夹下新建Home.vue页面。

Home.vue文件
<template><div>这是Home页面</div>
</template>
<script>export default{name:'Home',data(){return{}}}
</script>

在App.vue中写入，Home页面会展示过来，当然不仅仅是Home页面，新建其他页面绑定路由都可以。将vue原有的样式全部删除，后面会有影响。

//App.vue文件
<template><div id="app"><!-- router-view会展示页面内容 --><router-view></router-view></div>
</template>
<script>
//记得引入
import HeeloWorld from '../components/HelloWorld.vue'
export default {name: 'App',components: {HelloWorld}
}
</script>
<style>
#app {/* 这里非常重要，这里将vue原有的样式全部删除，后面会有影响 */height: 100vh;
}
</style>

1.5. 路由切换

在这里插入图片描述
（1）router.js文件，添加/User路由，选择正确路径。

//router/router.js文件的routes数组
import Vue from 'vue';
// 注意这里模块是小写vue
import VueRouter from 'vue-router';
import Home from '../view/Home.vue';
Vue.use(VueRouter)
// routes是一个数组
const routes = [{path: '/',name: 'Home',component: Home},{path: '/user',name: 'User',component: () => import('../view/User')}
]
const router = new VueRouter({mode: 'history',routes
})
export default router;

（2）改写main.js文件

//main.js
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
//ElementUI全局引入
// import ElementUI from 'element-ui';
// Vue.use(ElementUI)
//ElementUI按需引入
import Button from 'element-ui';
Vue.use(Button)
import router from '../router/router.js';
Vue.config.productionTip = false
new Vue({router,render: h => h(App),
}).$mount('#app')

（3）改写HelloWorld.vue文件

//Helloworld.vue文件的template标签内容。
<template><div class="hello"><!-- <el-row> --><router-link to='/'><el-button>Home按钮</el-button></router-link><router-link to='/user'><el-button type="primary">User按钮</el-button></router-link><!-- </el-row> --></div>
</template>
<script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script>

（4）在App.vue中引入HelloWorld.vue组件。

//App.vue文件
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App" /><router-view></router-view></div>
</template>
<script>import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}}
</script>
<style>#app {height: 100vh;}
</style>

（5）在view文件夹下新建User.vue测试所用。

//User.vue文件
<template><div>网上User页面</div>
</template>
<script>export default{name:'User',data(){return{}}}
</script>

可以通过两个按钮切换路由、切换页面。
在这里插入图片描述
源码下载

1. 环境配置

1.1. 开发工具下载

1.1.1. HbuilderX

1.1.2. Visual Studio Code

1.1.3. Node环境

1.1.4. 安装cnpm

1.1.5. 安装cnpm

1.1.6. 安装 vue-cli 脚手架构建工具

1.2. 创建项目

1.3. Element ui

1.3.1. 全局引入Element ui

1.3.2. 按需引入Element ui

1.4. Vue路由使用

1.5. 路由切换

相关文章：