首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

vue前端工程的搭建

Posted in Vue.js onMarch 31, 2021

一、用vue-cli搭建前端工程

1、什么是vue-cli

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

2、搭建环境准备

  • 安装node.js 官方网址： http://nodejs.cn/download/

    • node -v，npm -v 用于检测是否安装成功

  • 安装淘宝镜像加速器：

    npm install cnpm -g

  • 安装vue-cli

    cnpm install vue-cli -g
#查看是否安装成功
vue list

3.vue-cli项目的搭建

1.选择一个盘区建立一个空文件夹，用于存放当前项目

2.用cmd命令进入当前新建空文件下，执行

vue init webpack xxx                   xxx表示项目名

3.进入项目名中，建立依赖包

cd xxx 
npm install  
npm run dev

4.使用webpack打包项目

4.1 什么是webpack?

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

4.2 安装webpack

npm install webpack -g
npm install webpack-cli -g

测试是否安装成功

webpack -v
webpack-cli -v

5.使用webpack

在命令台输入：

webpack

6.vue-router路由的使用

6.1 什么是vue-router?

Vue Router是Vue.js官方的路由管理器（路径跳转）,负责页面的跳转。

6.2 vue-router的功能

  • 嵌套的路由/视图表
  • 路由参数、查询、通配符
  • 模块化的、基于组件的路由配置

6.3 vue-router的安装
打开命令行工具，进入项目目录，输入下面命令：

npm install vue-router --save-dev

安装完成后，在项目的包路径下，会产生一个vue-router包

6.4 vue-router 案例实现

1、在src的component目录下新建content.vue,main.vue,sun.vue,在src下建立router,

vue前端工程的搭建

2.sun.vue

<template>
    <h1>sun shile</h1>
</template>

<script>
    export default {
        name: "sun"
    }
</script>

<style scoped>

</style>

3.index.html

import Vue from 'vue'
import VueRouter from "vue-router";
import content from "../components/content"
import main from "../components/main"
import sun from "../components/sun"

//安装路由
Vue.use(VueRouter)


//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
        path:'/content',
      //跳转的组件
      component:content
    },
  {
    //路由路径
    path:'/main',
    //跳转的组件
    component:main
  },
    {
      //路由路径
      path:'/sun',
      //跳转的组件
      component:sun
    }
  ]
});

4.在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由布置
Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

5.App.vue

<template>
  <div id="app">
    <h1>study</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容项</router-link>
    <router-link to="/sun">其他项</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import content from './components/content'
export default {
  name: 'App',
  components:{
    content
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6.启动 npm run dev

vue前端工程的搭建

二、vue + ElementUI

创建工程目录：

vue init webpack project1

安装项目依赖，vue-router，element-ui，sass-loader和node-sass等插件

#进入工程目录
cd project1
# 安装依赖
npm install
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -s
# 安装SASS加载器
npm install --save-dev sass-loader  
npm install --save-dev node-sass  
# 项目启动
npm run dev

2.1.Npm命令解释

  • npm install moduleName：安装模块到项目目录
  • npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘的哪个位置，要看 npm config prefix的位置
  • npm install moduleName -save：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
  • npm install moduleName -save-dev：–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

2.1、Element的使用

在main.js中引入

import Vue from 'vue'
import App from './App'
//自动扫描里面的路由布置
import router from './router' 
//导入elementUI
import ElementUI from "element-ui"
//导入element css
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI)


Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App),//ElementUI规定这样使用
})

案例实现：

1.在src目录下创建一个components文件夹，该文件下存放vue组件。

main.vue

<template>
  <h1>首页</h1>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped>
</style>

login.vue（element-ui）

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

3,创建路由（在src目录下创建router文件夹， 并在router 目录下创建一个名为 index.js 的 vue-router 路由配置文件）

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

4.在main.js中配置相关信息

5.在App.vue中配置显示视图

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

6.测试运行

npm run dev

登录界面显示

vue前端工程的搭建

==注：==如果sass-loader版本引发错误，可在package.json文件里的 "sass-loader"里更换版本，例如：“sass-loader”: “^7.3.1”。

实用工具：
docsify文档生成工具 .

vue前端工程的搭建

- Author -

Gitshine

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue使用exif获取图片旋转，压缩的示例代码
Dec 11 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
vue路由实现登录拦截
XDM(3) Spring Security(2) 动态权限(1) 记事本(1) redis(3) Kotlin(1) Android Gradle(1) promise(2) 验证表达式(1) AOP(2)
You might like
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php处理文件的小例子(解压缩，删除目录)
2013/02/03 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python中的字典遍历备忘
2015/01/17 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
对Django外键关系的描述
2019/07/26 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Casetify官网：自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
365 Tickets英国：全球景点门票
2019/07/06 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
英文感谢信范文
2015/01/21 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
详解 TypeScript 枚举类型
2021/11/02 Javascript
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android