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

最新推荐文章于 2022-11-09 21:58:26 发布

老板来碗小面加蛋~

最新推荐文章于 2022-11-09 21:58:26 发布

阅读量255

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_39763246/article/details/115766817

版权

系列文章

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 -v，npm -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变量，也添加这个路径。
输入vue --version检查版本是否正确

创建项目

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

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

用IDEA 打开这个项目:

会让你安装插件：

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

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

注意：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

创建项目：

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

用IDEA打开该文件夹，创建以下目录结构：

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

运行：

六、vue-router路由

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

安装

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

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

目录结构：

具体步骤：

写好组件 Content1.vue和Content2.vue（代码一样的）

<template>
    <div>
        <h1>内容1</h1>
    </div>
</template>

<script>
    export default {
        name: "Content1"
    }
</script>

<style scoped>

</style>

写好路由文件：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'
});

使用组件：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>

在入口中挂载路由：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');

老板来碗小面加蛋~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 学习 02 —— vue-cli项目、Webpack、vue-router

系列文章vue 学习 01 —— 基本语法vue 学习 02 —— vue-cli项目、Webpack、vue-routervue 学习 03 —— ElementUI文章目录系列文章四、第一个vue-cli项目五、Webpack六、vue-router路由四、第一个vue-cli项目什么是vue-clivue-cli是官方提供的一个脚手架，是一个人用于快速生成vue的项目模板；使用预先定义好的目录结构和基础代码，就像我们在创建Maven项目时可以选择创建一个骨架项目。主要功能：统一的
复制链接

扫一扫