网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

vue 学习 02 —— vue-cli项目、Webpack、vue-router

2021/4/16 16:50:05 人评论

系列文章 vue 学习 01 —— 基本语法 vue 学习 02 —— vue-cli项目、Webpack、vue-router vue 学习 03 —— ElementUI 文章目录系列文章四、第一个vue-cli项目五、Webpack六、vue-router路由四、第一个vue-cli项目 什么是vue-cli vue-cli是官方提供的一个脚手架&#xff0…

系列文章

vue 学习 01 —— 基本语法
vue 学习 02 —— vue-cli项目、Webpack、vue-router
vue 学习 03 —— ElementUI

文章目录

  • 系列文章
  • 四、第一个vue-cli项目
  • 五、Webpack
  • 六、vue-router路由

四、第一个vue-cli项目

什么是vue-cli

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

使用预先定义好的目录结构和基础代码,就像我们在创建Maven项目时可以选择创建一个骨架项目。

主要功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

环境

  • Node.js:http://nodejs.cn/download/,这里要安装14版本,不要装15。(cmd下用node -vnpm -v看是否有版本号,有表示安装成功)

  • 安装node.js 淘宝镜像加速器(cnpm):npm config set registry https://registry.npm.taobao.org

  • 指定安装路径:(npm和cache文件自己创建)

    npm config set prefix "D:\Environment\npm"

    npm config set prefix "D:\Environment\npm\cache"

  • 安装vue-cli:npm install -g @vue/cli

  • 添加系统环境变量:把D:\Environment\npm添加到Path中,再新建一个vue变量,也添加这个路径。

    image-20210414145053528 image-20210414145114032
  • 输入vue --version检查版本是否正确

image-20210414145131496

创建项目

文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

可视化创建:输入命令vue ui,直接选则默认就好。

image-20210414150728047

image-20210414150719371

用IDEA 打开这个项目:

image-20210414150856629

会让你安装插件:

image-20210414151018881

输入vue serve启动,然后在浏览器输入localhost:8080访问:

image-20210414153019987

在终端按Ctrl+C终止项目:

image-20210414153204043

注意:vue-cli3是没有config文件的,需要自己建。(这个文件用于配置vue)

在根目录下新建vue.config.js

五、Webpack

它就是一个打包工具,很多时候我们去网上找到前端模板,它的JS我们都看不懂,是因为直接将很多个模块打包到一起了。下面演示一下Webpack的作用。

注意:vue里面使用的是vue-cli3,它已经高度集成了Webpack,所以这里按照webpack对vue-cli没什么意义,只是演示下webpack的作用

安装:(实际上vue-cli3已经内部集成了,用npm run build

  • npm install webpack -g
  • npm install webpack-cli

image-20210414154944569

创建项目:

  • 创建一个空文件夹,作为项目文件夹。

    image-20210414174653272
  • 用IDEA打开该文件夹,创建以下目录结构:

    image-20210414174802709

    hello.js

    //exports 用于暴露一个方法,使得其他模块能够调用该方法。
    exports.sayHay = function () {
        document.write("<h1>Hello JS</h1>");//JS 操作DOM,生成一个标签
    };
    

    main.js

    //main.js作为所以JS的主入口,打包后,从该JS进入
    //导入hello.js(作用类似于Java的import类)
    var hello = require("./hello");
    hello.sayHay();//相当于调用hello类的方法
    

    webpack.config.js

    //在这里控制打包
    module.exports = {
        //入口
        entry: "./modules/main.js",
        mode: "development",//这是新版要求的,指定模式
        //输出路径
        output: {
            filename: "./js/bundle.js"
        }
    };
    

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--前端的模块化开发,这里就像我们使用其他前端模板一样-->
    <script src="dist/js/bundle.js"></script>
    hello
    </body>
    </html>
    
  • 打包:在终端输入 webpack

image-20210414175322305
  • 运行:

    image-20210414175350286

六、vue-router路由

Vue Rounter是Vue.js官方的路由管理器,它和Vue.js深度集成,让构建单页面应用变得易如反掌。有了vue-router,

安装

在之前的第一个vue-cli项目的终端输入npm install vue-router --save

image-20210414180609704

使用:修改之前的vue-cli项目

目录结构:

image-20210414185644108

具体步骤:

  1. 写好组件 Content1.vue和Content2.vue(代码一样的)

    <template>
        <div>
            <h1>内容1</h1>
        </div>
    </template>
    
    <script>
        export default {
            name: "Content1"
        }
    </script>
    
    <style scoped>
    
    </style>
    
  2. 写好路由文件:router/index.js

    import Vue from 'vue'
    import VueRouter from "vue-router"
    //导入三个自己写的组件
    import Content1 from "../components/Content1";
    import Content2 from "../components/Content2";
    
    //1. 安装路由插件
    Vue.use(VueRouter);
    
    //2. 创建并配置路由,export导出到外部
    export default new VueRouter({
        routes: [
            {
                //路由路径:类似Java的@RequestMapping
                path: '/content1',
                name: 'content1',//可以不写
                //跳转的组件
                component: Content1
            },
            {
                //路由路径
                path: '/content2',
                //跳转的组件
                component: Content2
            }
        ],
        //默认是hash模式,url带#,改为history模式,url不带#;
        mode: 'history'
    });
    
  3. 使用组件:App.vue

    <template>
      <div id="app">
        <!-- router-link类似于HTML的a标签    -->
        <router-link to="/content1">内容页1</router-link><br/>
        <router-link to="/content2">内容页2</router-link><br/>
        <!-- router-view 是显示模板的内容-->
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
    }
    </script>
    
  4. 在入口中挂载路由:main.js

    import Vue from 'vue'
    import App from './App.vue'
    
    //自动扫描路由配置
    import router from './router'
    
    Vue.config.productionTip = false;
    
    new Vue({
      render: h => h(App),
      //vue实例挂载路由实例
      router,
    }).$mount('#app');
    

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?