zoukankan      html  css  js  c++  java
  • Vue脚手架创建项目目录详解

    文章内容参考: https://www.cnblogs.com/chenleideblog/p/10432375.html

    Vue项目的创建

    使用图形界面创建Vue项目

    # 安装vue
    npm install -g @vue/cli
    
    # 进入DOS终端
    vue ui
    
    # 自定义创建项目
    ...
    

    Vue目录分析

    以下就项目文件夹中的各文件的作用进行介绍:

    ├── build/               # Webpack 配置目录
    ├── dist/                # build 生成的生产环境下的项目
    ├── config/              # Vue基本配置文件,可以设置监听端口,打包输出等
    ├── node_modules/        # 依赖包,通常执行npm i会生成
    ├── src/                 # 源码目录(开发的项目文件都在此文件中写)
    │   ├── assets/         # 放置需要经由 Webpack 处理的静态文件,通常为样式类文件,如css,sass以及一些外部的js
    │   ├── components/     # 公共组件
    │   ├── filters/        # 过滤器
    │   ├── store/        # 状态管理
    │   ├── routes/         # 路由,此处配置项目路由
    │   ├── services/       # 服务(统一管理 XHR 请求)
    │   ├── utils/          # 工具类
    │   ├── views/          # 路由页面组件
    │   ├── App.vue         # 根组件
    │   ├── main.js         # 入口文件
    ├── index.html           # 主页,打开网页后最先访问的页面
    ├── static/              # 放置无需经由 Webpack 处理的静态文件,通常放置图片类资源
    ├── .babelrc             # Babel 转码配置
    ├── .editorconfig        # 代码格式
    ├── .eslintignore        # (配置)ESLint 检查中需忽略的文件(夹)
    ├── .eslintrc            # ESLint 配置
    ├── .gitignore           # (配置)在上传中需被 Git 忽略的文件(夹)
    ├── package.json         # 本项目的配置信息,启动方式
    ├── package-lock.json    # 记录当前状态下实际安装的各个npm package的具体来源和版本号
    ├── README.md            # 项目说明(很重要,便于其他人看懂)
    

    我们以后用到最多的就是src文件夹,因为我们编写的代码要放在里面

    在根目录下存在index.html文件

    在src目录下存在main.js,App.vue以及在router文件夹下存在index.js

    index.html---主页,项目入口

    index.html为项目访问的首站点,一般我们之定义一个空的根节点,在main.js里面定义的实例将挂载到根节点下,内容都通过vue组件来进行填充。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>首页title</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    App.vue---根组件

    我们在Vue中要经常建立后缀名为.vue的文件,.vue的文件通常由三部分构成,分别用

    <template>
      <!-- 组件代码区域-->
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    // 这里用于定义Vue组件的业务逻辑
    export default {
        data: (){		// 私有数据
        
        return {}
        
    	},
    	methods: {}, //处理函数
        },
        // ...其他业务逻辑
    
    </script>
    
    <!--scoped 的作用: 防止样式组件之间的冲突,作用域:当前文件-->
    <style scoped>
        样式代码区域
    </style>
    

    我们可以将上述三个部分理解为原来我们学习前端的html,javascript与css三个部分。

    补充:

    【template】

    其中模板只能包含一个父节点,也就是说顶层的div只能有一个(例如上图,父节点为#app的div,其没有兄弟节点)

    是子路由视图,后面的路由页面都显示在此处

    打一个比喻吧,类似于一个插槽,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示

    【script】

    vue通常用es6来写,用export default导出,其下面可以包含数据data,生命周期(mounted等),方法(methods)等。

    【style】

    样式通过style标签包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加scoped,

    如要引入外部css文件

    首先需给项目安装css-loader依赖包,打开cmd,进入项目目录,输入npm install css-loader,回车。

    安装完成后,就可以在style标签下import所需的css文件。

    这样,我们就可以把style下的样式封装起来,写到css文件夹,再引入到页面使用

    <style> 
    
         import './assets/css/public.css'  
    
    </style> 
    

    main.js---入口文件

    main.js主要是引入vue框架,根组件及路由设置,并且定义vue实例

    下图中的components:{App}就是引入的根组件App.vue

    后期还可以引入插件,当然首先得安装插件。

    import Vue from 'vue'    				/*引入vue框架*/
    import ElementUI from 'element-ui'      /*引入element-ui样式*/
    import App from './App'     			/*引入根组件*/
    import router from './router'    		/*引入路由设置*/
    
    Vue.config.productionTip = false    	/*关闭生产模式下给出的提示*/
    
     /*定义一个新实例*/
    new Vue({
      router,
      render: h => h(App)		// 使用render函数渲染App.vue单文件组件
    }).$mount('#app')			// 将该实例挂载到 #app中
    

    index.js---路由配置

    在router文件夹下,有一个index.js文件,即为路由配置文件。

    import Vue from 'vue'    					/*引入vue框架*/
    import Router from 'vue-router'  			/*引入路由依赖*/
    import Hello from ‘@、components/Hello’     /*引入页面组件,命名为Hello*/
    
    Vue.use(VueRouter)   /*使用路由依赖*/
    
    /*定义路由*/
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        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/About.vue')
      }
    ]
    
    const router = new VueRouter({
      routes
    })
       
    

    这里定义了路径为'/'的路由,该路由对应的页面是Home组件,所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Home组件.类似的,我们可以设置多个路由,‘/index’,'/list'之类的,当然首先得引入该组件,再为该组件设置路由

  • 相关阅读:
    Algorithm Gossip (48) 上三角、下三角、对称矩阵
    .Algorithm Gossip (47) 多维矩阵转一维矩阵
    Algorithm Gossip (46) 稀疏矩阵存储
    Algorithm Gossip (45) 费氏搜寻法
    Algorithm Gossip (44) 插补搜寻法
    Algorithm Gossip (43) 二分搜寻法
    Algorithm Gossip (42) 循序搜寻法(使用卫兵)
    Algorithm Gossip (41) 基数排序法
    Algorithm Gossip (40) 合并排序法
    AlgorithmGossip (39) 快速排序法 ( 三 )
  • 原文地址:https://www.cnblogs.com/code-duck/p/13377885.html
Copyright © 2011-2022 走看看