vue-cli前端工程化——创建vue-cli工程 & router版本的创建 & 目录结构 & 案例初步

朱雀 2023-10-14 19:46 88阅读 0赞

#### 目录 ####

*  引出
 *  创建vue-cli前端工程
 *   *  vue-cli是什么
     *  自动构建
     *   *  创建vue-cli项目
         *  选择Vue的版本号
     *  手动安装
     *   *  进行选择
         *  创建成功
     *  手动创建router版
     *   *  多了一个router
     *  运行测试
     *   *  bug解决
 *  Vue项目结构
 *   *   *  main.js
         *  package.json
         *  vue.config.js
 *  Vue项目初步
 *   *  hello案例
 *  总结

## 引出 ##

1.vue-cli是啥，创建项目的方式；  
2.vue项目目录结构，以及项目初步

--------------------

## 创建vue-cli前端工程 ##

### vue-cli是什么 ###

> Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

![在这里插入图片描述][1fed42b9ce124dfba854f09f438639f9.png]

### 自动构建 ###

> vue create vue-hello2

#### 创建vue-cli项目 ####

![在这里插入图片描述][5c22d93c0b3c46d78386f548fb8d9583.png]

#### 选择Vue的版本号 ####

![在这里插入图片描述][e90e14431d6648a5a75181d7ad1ba7e7.png]

![在这里插入图片描述][7cd7d238dad94d7f9086b49c267ed9eb.png]

### 手动安装 ###

![在这里插入图片描述][e6dc123ae6ea4414aadfafd920015e8b.png]

#### 进行选择 ####

![在这里插入图片描述][d8fe561a9c7d4d8e802c17ec7a9e3e4c.png]

> 2.0版本

![在这里插入图片描述][97207935d1f4499685ced307d7c0f5db.png]

> 选择第一个

![在这里插入图片描述][bbd1ca61409b4262b127b2bd615fcd9f.png]

> 模板保存

![在这里插入图片描述][f64fc21fde594cda877a0755a0b78dc6.png]

#### 创建成功 ####

![在这里插入图片描述][4c150c8f890f42c786f17835e3ec210c.png]

### 手动创建router版 ###

![在这里插入图片描述][73c57ecf9f784aa3a74b28410d63e775.png]

![在这里插入图片描述][8639bbc42daa4d0da18ee159990450ff.png]

#### 多了一个router ####

![在这里插入图片描述][9bb3954621b74bf19231982d283d58f1.png]

### 运行测试 ###

> npm run serve

![在这里插入图片描述][3b8b65803d0443da97722ba9c81b4f97.png]

#### bug解决 ####

> 如果出现Error: error digital envelope routines::unsupported，在命令行输入

![在这里插入图片描述][dd72fdbe94dc402697632ef80cd660cb.png]

SET NODE_OPTIONS=--openssl-legacy-provider

## Vue项目结构 ##

![在这里插入图片描述][b55cd1f400444b4780c44924ddf9c791.png]

> 文件作用

![在这里插入图片描述][23f185cb51604a56a12173196b00dc28.png]

![在这里插入图片描述][15c9f17848044e3d950e45397844ac74.png]

#### main.js ####

> src/main.js是入口文件，主要作用是初始化vue实例并使用需要的插件
> 
> 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素

![在这里插入图片描述][5ffb60b508de4bc5bd642a8b32a06916.png]

> 运行的流程

![在这里插入图片描述][2c3c7964d687423a9e262c5e8fc419e1.png]

#### package.json ####

{
        
      "name": "hello-worldx",   //项目名称
      "version": "0.1.0",   //项目包版本 「主版本号. 次版本号. 修订号」
      "private": true,  //防止我们意外地将私有库发布到 npm 服务器。
      "scripts": {
         //scripts 是 package.json 中内置的脚本入口
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
      },
      "dependencies": {
           //生产环境中所必须的依赖包,将来可以通过这里的配置 下载依赖  dependencies ：参与编译和打包
        "core-js": "^3.8.3",
        "register-service-worker": "^1.7.2",
        "vue": "^2.6.14"
      },
      "devDependencies": {
         //开发阶段需要的依赖包,不参与打包
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-pwa": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "less": "^4.0.0",
        "less-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.14"
      },
      "browserslist": [ //告知支持哪些浏览器及版本。
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

#### vue.config.js ####

如果修改启动的服务端口，可以修改**vue.config.js**文件

![在这里插入图片描述][67c3c849e9fe438d8e6611a2a9d54cef.png]

module.exports ={
         
      devServer:{
        
        open:true,
        port:8099
      }
    }

## Vue项目初步 ##

### hello案例 ###

![在这里插入图片描述][9439e802f15b44a29f27f2d42c8999d6.png]

![在这里插入图片描述][2d11746dd3e74de1b9032693f10a1721.png]

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import HomeView from '../views/HomeView.vue'
    import Move from '../components/Move.vue'
    const Login =  () => import('../components/Login.vue')
    const Comdy =  () => import('../components/Comdy.vue')
    const Action =  () => import('../components/Action.vue')
    const GoodsIndex =  () => import('../components/GoodsIndex.vue')
    const GoodsList =  () => import('../components/GoodsList.vue')
    
    
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        
        path: '/',
        name: 'home',
        component: Login
      },
      {
        
        path:'/goodsIndex',
        component: GoodsIndex,
        children:[
          {
        path:'/', component: GoodsList},
          {
        path:'/goodsList',name: 'goodsList',component: GoodsList},
        ]
      },
    
    
      {
        
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
      },
      {
        
        //导入组件的方法：懒加载，没有点击到对应组件路由，就不会加载到Vue内存中
        //好处：可以节省内存资源
        //应用场景：改组件页面简单，或者访问量不多的（比如注册页面）
        //系统首页不适合做懒加载
        // const Login =  () => import('../components/Login.vue')
        path:'/login',component: Login
      },
    
      
    
      //嵌套路由
      {
        
        path:'/move',component: Move,
    
        //使用children实现嵌套路由
        children: [
          {
        path:'/',component: Action},
          {
        path:'/action',component: Action},
          {
        path:'/comdy',component: Comdy},
    
        ],
      }
    ]
    
    const router = new VueRouter({
        
      routes
    })
    
    export default router

> 默认登陆页面

![在这里插入图片描述][639510a682e64a388de5e6edbc8af452.png]

> 登陆成功后跳转

![在这里插入图片描述][65ed308f9dc04b909d7d1d799a90e845.png]

<template>
        <div class="login">
            <h1>登陆页面</h1>
            <form>
                账号：<input type="text" name=""/>
                账号：<input type="text" name=""/>
                <input type = "button" value="登陆" @click="login"/>
            </form>
        </div>
    </template>
    
    
    <script>
    export default {
        
        methods:{
        
            //声明式路由跳转router-link
            //编程式路由跳转this.$router.push()
    
            login(){
        
                this.$router.push({
        path:'/goodsIndex'})
            }
        }
    
    
    }
    
    </script>
    
    
    <style>
    
    
    </style>

![在这里插入图片描述][acd4422443bd4487bfc38b5af446ad10.png]

--------------------

## 总结 ##

1.vue-cli是啥，创建项目的方式；  
2.vue项目目录结构，以及项目初步

[1fed42b9ce124dfba854f09f438639f9.png]: https://img-blog.csdnimg.cn/1fed42b9ce124dfba854f09f438639f9.png
[5c22d93c0b3c46d78386f548fb8d9583.png]: https://img-blog.csdnimg.cn/5c22d93c0b3c46d78386f548fb8d9583.png
[e90e14431d6648a5a75181d7ad1ba7e7.png]: https://img-blog.csdnimg.cn/e90e14431d6648a5a75181d7ad1ba7e7.png
[7cd7d238dad94d7f9086b49c267ed9eb.png]: https://img-blog.csdnimg.cn/7cd7d238dad94d7f9086b49c267ed9eb.png
[e6dc123ae6ea4414aadfafd920015e8b.png]: https://img-blog.csdnimg.cn/e6dc123ae6ea4414aadfafd920015e8b.png
[d8fe561a9c7d4d8e802c17ec7a9e3e4c.png]: https://img-blog.csdnimg.cn/d8fe561a9c7d4d8e802c17ec7a9e3e4c.png
[97207935d1f4499685ced307d7c0f5db.png]: https://img-blog.csdnimg.cn/97207935d1f4499685ced307d7c0f5db.png
[bbd1ca61409b4262b127b2bd615fcd9f.png]: https://img-blog.csdnimg.cn/bbd1ca61409b4262b127b2bd615fcd9f.png
[f64fc21fde594cda877a0755a0b78dc6.png]: https://img-blog.csdnimg.cn/f64fc21fde594cda877a0755a0b78dc6.png
[4c150c8f890f42c786f17835e3ec210c.png]: https://img-blog.csdnimg.cn/4c150c8f890f42c786f17835e3ec210c.png
[73c57ecf9f784aa3a74b28410d63e775.png]: https://img-blog.csdnimg.cn/73c57ecf9f784aa3a74b28410d63e775.png
[8639bbc42daa4d0da18ee159990450ff.png]: https://img-blog.csdnimg.cn/8639bbc42daa4d0da18ee159990450ff.png
[9bb3954621b74bf19231982d283d58f1.png]: https://img-blog.csdnimg.cn/9bb3954621b74bf19231982d283d58f1.png
[3b8b65803d0443da97722ba9c81b4f97.png]: https://img-blog.csdnimg.cn/3b8b65803d0443da97722ba9c81b4f97.png
[dd72fdbe94dc402697632ef80cd660cb.png]: https://img-blog.csdnimg.cn/dd72fdbe94dc402697632ef80cd660cb.png
[b55cd1f400444b4780c44924ddf9c791.png]: https://img-blog.csdnimg.cn/b55cd1f400444b4780c44924ddf9c791.png
[23f185cb51604a56a12173196b00dc28.png]: https://img-blog.csdnimg.cn/23f185cb51604a56a12173196b00dc28.png
[15c9f17848044e3d950e45397844ac74.png]: https://img-blog.csdnimg.cn/15c9f17848044e3d950e45397844ac74.png
[5ffb60b508de4bc5bd642a8b32a06916.png]: https://img-blog.csdnimg.cn/5ffb60b508de4bc5bd642a8b32a06916.png
[2c3c7964d687423a9e262c5e8fc419e1.png]: https://img-blog.csdnimg.cn/2c3c7964d687423a9e262c5e8fc419e1.png
[67c3c849e9fe438d8e6611a2a9d54cef.png]: https://img-blog.csdnimg.cn/67c3c849e9fe438d8e6611a2a9d54cef.png
[9439e802f15b44a29f27f2d42c8999d6.png]: https://img-blog.csdnimg.cn/9439e802f15b44a29f27f2d42c8999d6.png
[2d11746dd3e74de1b9032693f10a1721.png]: https://img-blog.csdnimg.cn/2d11746dd3e74de1b9032693f10a1721.png
[639510a682e64a388de5e6edbc8af452.png]: https://img-blog.csdnimg.cn/639510a682e64a388de5e6edbc8af452.png
[65ed308f9dc04b909d7d1d799a90e845.png]: https://img-blog.csdnimg.cn/65ed308f9dc04b909d7d1d799a90e845.png
[acd4422443bd4487bfc38b5af446ad10.png]: https://img-blog.csdnimg.cn/acd4422443bd4487bfc38b5af446ad10.png