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开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
vue路由实现登录拦截
You might like
Yii控制器中操作视图js的方法
2016/07/04 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JS常见算法详解
2017/02/28 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python NumPy库安装使用笔记
2015/05/18 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
职业教育毕业生求职信
2013/11/09 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
入党自荐书范文
2014/03/09 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
计划生育诚信协议书
2014/11/02 职场文书
煤矿安全保证书
2015/02/27 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
python分分钟绘制精美地图海报
2022/02/15 Python