首页
所有分类
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自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
vue路由实现登录拦截
字符串(2) PV(1) UV(1) 逆序(1) yolo3(1) 进程假死(1) 连接数(1) jenkins(1) 线程(1) 访问日志(2)
You might like
PHP常用函数小技巧
2008/09/11 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
Jquery replace 字符替换实现代码
2010/12/02 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
javascript设计模式Constructor（构造器）模式
2016/08/19 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
深入理解React高阶组件
2017/09/28 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
详解javascript中的Error对象
2019/04/25 Javascript
ES6 class类链式继承，实例化及react super(props)原理详解
2020/02/15 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python实现将文本转换成语音的方法
2015/05/28 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
优秀社区干部事迹材料
2014/02/03 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
python爬取某网站原图作为壁纸
2021/06/02 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS