首页
所有分类
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 相关文章推荐
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
vue路由实现登录拦截
思想汇报(404) 证婚词(21) 表扬信(62) 道歉信(39) 邀请函(127) 欢迎词(65) 介绍信(57) 职业生涯规划书(234) 演讲稿(869) 心得体会(660)
You might like
Oracle 常见问题解答
2006/10/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP fclose函数用法总结
2019/02/15 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
对比分析json及XML
2014/11/28 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python求解水仙花数的方法
2015/05/11 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Python timeit模块的使用实践
2020/01/13 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
英国儿童家具专卖店：GLTC
2016/09/24 全球购物
荷兰浴室和卫浴网上商店：Badkamerxxl.nl
2020/10/06 全球购物
商业房地产广告语
2014/03/13 职场文书
毕业生就业意向书
2014/04/01 职场文书
国际金融专业自荐信
2014/07/05 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
补充协议书
2015/01/28 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js