vue前端工程的搭建


Posted in Vue.js onMarch 31, 2021

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

1、什么是vue-cli

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

2、搭建环境准备

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

    • node -vnpm -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.js 相关文章推荐
vue+element实现动态加载表单
Dec 13 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
详解Vue router路由
Nov 20 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
vue路由实现登录拦截
You might like
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php文件操作相关类实例
2015/06/18 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
JS中call和apply函数用法实例分析
2018/06/20 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python搜索指定目录的方法
2015/04/29 Python
Python的标准模块包json详解
2017/03/13 Python
python实现决策树分类算法
2017/12/21 Python
python计算日期之间的放假日期
2018/06/05 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
什么是类的返射机制
2016/02/06 面试题
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
大学辅导员述职报告
2015/01/10 职场文书
初中班长竞选稿
2015/11/20 职场文书
《观潮》教学反思
2016/02/17 职场文书
设置IIS Express并发数
2022/07/07 Servers