Vue前端环境准备

本文详细介绍了Vue-cli的安装、项目创建、目录结构、配置、组件开发、ElementUI集成、Axios异步请求、Vue路由以及打包部署的全过程,帮助读者快速上手Vue项目开发。
摘要由CSDN通过智能技术生成

vue-cli

Vue-cli是Vue官方提供的脚手架,用于快速生成一个Vue项目模板

提供功能:

        统一的目录结构

        本地调试

        热部署

        单元测试

        集成打包上线

依赖环境:NodeJs

安装NodeJs与Vue-Cli

1、安装nodejs(已经安装就不用了)

       

node-v.msi

2、验证

cmd-->node -v

3、配置npm的全局安装路径

        管理员身份运行cmd

#设置为NodeJs安装目录
npm config set prefix "D:\Program Files\nodejs\node-global"
#验证设置是否成功
npm config get prefix

4、切换npm淘宝镜像(优化下载)

        管理员身份运行cmd

npm config set registry https://registry.npmmirror.com

5、安装vue-cli

         管理员身份运行cmd

npm install -g @vue/cli
#验证安装
vue --version

项目构建

1、新建工程文件

2、在该目录启动cmd/ vscode

3、创建vue项目

vue create vue-project
或者调出图形化界面创建:vue ui
    

项目目录介绍 

node_modules 整个项目的依赖包

public 项目的静态文件

src 项目源代码

        asssets静态资源

        components可重用的组件

        router路由配置

        views视图组件(页面)

        App.vue入口页面(根组件)

        main.js入口js文件

package.json 模板基本信息,项目开发所需要模板,版本信息

vue.config.js 保存vue配置的文件。如端口、代理等

Vue项目启动

1、vscode---Npm脚本---点击serve vue-cli-service serve

2、命令行:npm run serve

配置端口号

 vue.config.js

 Vue项目开发流程

Vue的组件文件以.vue结尾,每个组件由三个部分组成:

        <template>模板部分,由他生成html代码

        <script> js代码,控制模板部分的数据来源和行为

        <style> css样式部分

Element

饿了吗开发,基于Vue2.0

快速入门

1、安装ElementUI组件库(当前工程目录下)

npm install element-ui@2.15.3

2、引入ElementUI组件库:main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、访问官网,复制代码:views目录下,建立xxx.Vue文件

4、App.Vue标签引入

 Axios异步请求

Vue中使用Axios

1、在项目目录安装axios

npm install axios

2、需要使用时导入

import axios from 'axios'

3、钩子方法

 Vue路由

url的hash(#)与组件之间的对应关系

 

1、安装Vue路由

npm install vue-router@3.5.1

2、定义路由表

        router--index.js

3、router-link:相当于超链接

4、router-view

打包部署

1、NPM--点击build--生成dist文件

2、dist文件中的内容放在Nginx的html目录下

总览

1、目录结构

2、main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'; 
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3、APP.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<style>
body,html,#app{
  height: 100%;
  margin: 0;
}
</style>

4、router--index.js

import Vue from 'vue';
import VueRouter from 'vue-router';


Vue.use(VueRouter);

const routes = [
{
  path:'/emp',
  name:'home',
  component:()=>import('../view/LoginPage.vue')
}
];

const router = new VueRouter({
  routes
});

export default router;

  • 16
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在搭建微信公众号前端vue环境之前,首先需要准备一个微信公众平台测试账号。这个测试账号可以通过个人微信扫描二维码登录来获得,不需要注册。接下来,我们可以按照以下步骤来搭建vue环境: 1. 确保你已经安装了Node.js和npm(Node包管理器)。 2. 打开命令行终端,进入你的项目文件夹。 3. 使用以下命令来初始化一个基于vue的项目: ``` npm init -y ``` 4. 接下来,安装vue-cli,它是一个vue脚手架工具,可以帮助我们快速搭建项目: ``` npm install -g @vue/cli ``` 5. 初始化一个新的vue项目: ``` vue create your-project-name ``` 其中,"your-project-name"是你项目的名称,可以自行替换。 6. 在初始化过程中,你可以选择一些项目配置选项,例如使用默认配置或手动选择特定的特性。根据你的需求进行选择。 7. 初始化完成后,进入到项目目录: ``` cd your-project-name ``` 8. 运行以下命令来启动项目: ``` npm run serve ``` 9. 现在,你的vue环境已经搭建完成。你可以根据项目需求进行开发,编写vue组件、路由、数据交互等等。 请注意,以上步骤是搭建基于vue的微信公众号前端环境的一般方法。具体的配置和开发流程可能会根据你的实际应用场景而有所不同。因此,在进行微信公众号前端开发之前,建议你仔细阅读微信公众平台的开发文档,并根据文档中的指引进行配置和开发工作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值