vue-cli

最新推荐文章于 2024-02-12 22:36:49 发布

Yoooung～

最新推荐文章于 2024-02-12 22:36:49 发布

阅读量61

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/m0_54797890/article/details/114851903

版权

大前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

准备工作

首先在官网下载node.js

下载好之后，在命令行通过node -v 和 npm -v查看是否安装成功

配置淘宝镜像加速：npm config set registry https://registry.npm.taobao.org

安装vue-cli：npm install vue-cli -g

安装文件夹在用户目录下面的AppData\Roaming\npm中

进入项目目录，生成项目文件：vue init webpack 项目名

进入项目名文件，安装依赖，依赖是根据packa.json自动安装的：npm install

启动：npm run dev

npm命令解释

在这里插入图片描述

webpack打包工具

安装打包工具：npm install webpack -g

安装打包工具：npm install webpack-cli -g

配置webpack.config.js文件
在这里插入图片描述
示例

// hello.js
// 暴露一个方法
exports.sayhi = function (){
    document.write("<h1>Hello world!</hi>")
}

// main.js
var hello = require("./hello");
hello.sayhi();

// webpack.config.js
module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
}

在命令行输入webpack打包，生成bundle.js文件
在index.html中使用

<body>
    <script src="dist/js/bundle.js"></script>
</body>

在这里插入图片描述

vue-router

在项目目录安装vue-router：npm install vue-router --save-dev，这个会被安装到node-modules中

在main.js中添加：

import VueRouter from 'vue-router'
// 显式声明，使用VueRouter
Vue.use(VueRouter)

新建一个组件：
在这里插入图片描述
App.vue中使用这个组件：

src下面新建文件夹router，router下新建文件index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'

Vue.use(VueRouter)

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

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/>'
})

App.vue也改一下

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

element-ui

在项目文件夹中：npm i element-ui -S

安装SASS加载器：npm install sass-loader node-sass --save-dev

示例：
在这里插入图片描述

// Login.vue
<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: ''
        },
        // 表单验证
        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>

// index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../view/Login'
import Main from '../view/Main'

Vue.use(Router)

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

// Main.vue
<template>
    <h1>首页</h1>
</template>

<script>

    export default {
        name: 'Main'
    }
</script>

<style scoped>

</style>

// main.js
import Vue from 'vue'
import App from './App'
import router from './router' // 自动扫描里面的路由配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);
Vue.use(router)
new Vue({
  el: '#app',
  // 配置路由
  router,
  components: { App },
  render: h => h(App)
})

App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

路由嵌套

在这里插入图片描述

Yoooung～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-cli

准备工作首先在官网下载node.js下载好之后，在命令行通过node -v 和 npm -v查看是否安装成功配置淘宝镜像加速：npm config set registry https://registry.npm.taobao.org安装vue-cli：npm install vue-cli -g安装文件夹在用户目录下面的AppData\Roaming\npm中进入项目目录，生成项目文件：vue init webpack 项目名进入项目名文件，安装依赖，依赖是根据packa.json自动安装
复制链接

扫一扫

专栏目录