精华内容
下载资源
问答
  • Vue.js 目录结构 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse、Atom等) 中打开该目录,结构如下所示: 目录解析 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录...

    最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空狮子爱吃草两位的博客提供了很大的帮助,现将该部分知识做以下总结。

    下图为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文件夹,因为我们编写的代码要放在里面。

    一开始在学习Vue中,总是理解不清楚各文件之间的逻辑,所以导致自己一直在原地徘徊,在自己尝试了微信小程序的开发之后,大致有了一个模糊的分时,反过头来继续从事Vue项目的开发,结果原来理不清的东西都豁然开朗了。

    参考狮子爱吃草朋友的博客,结合自己的心得进行总结:

    在根目录下存在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></template>,<script></script>与<style></style>标签包裹。

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

    其中,<template></template>通常建立我们要用的网页界面,<script></script>通常与数据打交道,定义数据的首发方式等,面向逻辑,而<style></style>主要负责<template></template>标签中的样式。

    上面三者的结合,就构成了我们所见到的网页,一般我们在开发新的页面中一般是建立一个新的.vue文件,在文件中完成三个环节的编写。

    复制代码

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: "app"
    };
    </script>
    <style>
    .add-container {
      margin-bottom: 20px;
    }
    </style>

    复制代码

    补充:

    【template】

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

    <router-view></router-view>是子路由视图,后面的路由页面都显示在此处

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

    【script】

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

    【style】

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

    如要引入外部css文件,首先需给项目安装css-loader依赖包,打开cmd,进入项目目录,输入npm install css-loader回车。安装完成后,就可以在style标签下import所需的css文件。这样,我们就可以把style下的样式封装起来,写到css文件夹,再引入到页面使用,整个vue页面也看上去更简洁。

    <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({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }     /*此处为引入的根组件的App.vue*/
    })

    复制代码


    router.js---路由配置

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

    复制代码

    import Vue from 'vue'    /*引入vue框架*/
    import Router from 'vue-router'   /*引入路由依赖*/
    import Hello from ‘@、components/Hello’    /*引入页面组件,命名为Hello*/
    
    Vue.use(Router)   /*使用路由依赖*/
    
       /*定义路由*/
    export default new Router({
      router:[
       {
           path: '/ ',
           name: 'Hello',
           component: Hello
        }
     ]
    })    

    复制代码

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

    展开全文
  • 【摘要】最近在学习vue,从小白开始,我希望能把我学习vue的过程给记载下来,希望能和大家一起进步,但愿我所写的一点一滴,能对同仁们有所帮助,欢迎探讨。作者:清泓1、 Homebrew的安装Homebrew(这是个链接,大家...

    aa2b015129bf0641e207cfcf48b77121.png

    【摘要】最近在学习vue,从小白开始,我希望能把我学习vue的过程给记载下来,希望能和大家一起进步,但愿我所写的一点一滴,能对同仁们有所帮助,欢迎探讨。

    作者:清泓

    1、 Homebrew的安装

    Homebrew(这是个链接,大家直接点击进去下载就OK)是系统必备的工具(程序)。

    大家可以先检查一些一下系统中是否已经安装homebrew,指令如下:

    brew 

    如果返回 Homebrew 的版本号 例如:

    d94d18d5ade506a5173f453203937a76.png

    如果是以上情况的话,可以跳过这一步,如果没有,那么就需要执行以上步骤了。

    2、安装 node.js

    我对brew命令并不是很熟悉,试了几次经常出错的情况,所以采用手动安装下载地址:https://nodejs.org/en/download 选择mac os型号。

    我用的是稳定版,大家可以根据自己的需求选择自己喜欢的版本。

    3、 获取nodejs模块安装目录访问权限 (必须执行)

    sudo chmod -R 777 /usr/local/lib/node_modules/  

    4、安装 淘宝镜像 (cnpm)

    npm install -g cnpm --registry=https://registry.npm.taobao.org  

    这个是为了更加快速的执行下载资源等相关操作。

    5、安装webpack

    sudo cnpm install webpack -g  

    这里需要注意一点使用上面语法执行npm run dev 报错! MAC电脑出现 .bin/webpack-dev-server permission denied 提示权限问题,为了避免出现这个问题你可以采取下面语法

    sudo cnpm install webpack-dev-server -g   

    6、安装vue脚手架

    sudo cnpm install -g vue-cli  

    7、安装项目依赖

    cnpm install   

    8、安装 vue 路由模块vue-router和网络请求模块vue-resource

    cnpm install vue-router vue-resource --save  

    9、cd到指定文件夹(Windows可以直接在想要的根目录下,直接打开cmd指令 ),然后新建一个vue项目。

    vue init webpack 你想要命名的项目名

    10、接下来就是定义你的vue项目属性。

    752c6d8f61e14d93e3fb10e0dc6b9db0.png

    11、cd到刚才创建好的vue项目包下,然后启动项目

    npm run dev

    安装了淘宝镜像的话,可以在指令前面加个c,更快。

    cnpm run dev

    12、项目打包

    cnpm run build

    到这一步之后,出现以下提示,恭喜你,通关了!

    5f3c4630c07637e14b25977be9dfd5d2.png

    这个地址,你可以直接在浏览器中打开。然后就可以开始开发你的vue项目了。

    另外是常见报错的解决方案,这边也给大家放下面:

    安装homebrew报错curl: (7) Failed to connect to http://raw.githubusercontent.com port 443: Operation

    网域服务器缓存污染(DNS cache pollution),又称域名服务器缓存投毒(DNS cache poisoning)、DNS缓存投毒,是指一些刻意制造或无意中制造出来的域名服务器数据包,把域名指往不正确的IP地址。一般来说,在互联网上都有可信赖的网域服务器,但为减低网络上的流量压力,一般的域名服务器都会把从上游的域名服务器获得的解析记录暂存起来,待下次有其他机器要求解析域名时,可以立即提供服务。一旦有关网域的局域域名服务器的缓存受到污染,就会把网域内的电脑导引往错误的服务器或服务器的网址。

    可以使用Switch Hosts

    https://github.com/hawtim/blog/issues/10

    e05fe139e6b768dd644ac5ca6e67d7fa.png

    199.232.68.133 http://raw.githubusercontent.com

    199.232.68.133 http://user-images.githubusercontent.com

    199.232.68.133 http://avatars2.githubusercontent.com

    199.232.68.133 http://avatars1.githubusercontent.com

    欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏, 必须干货!

    互联网创业专栏 (我们小伙伴的创业历程)

    与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

    互联网产品研发管理 (我们公司对产品结构的管理思路)

    产品君的案例库(产品小伙伴深刻总结)

    展开全文
  • Vue项目开发目录结构

    2019-02-25 18:00:00
    最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供...

    最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空狮子爱吃草两位的博客提供了很大的帮助,现将该部分知识做以下总结。

    下图为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文件夹,因为我们编写的代码要放在里面。

    一开始在学习Vue中,总是理解不清楚各文件之间的逻辑,所以导致自己一直在原地徘徊,在自己尝试了微信小程序的开发之后,大致有了一个模糊的分时,反过头来继续从事Vue项目的开发,结果原来理不清的东西都豁然开朗了。

    参考狮子爱吃草朋友的博客,结合自己的心得进行总结:

    在根目录下存在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></template>,<script></script>与<style></style>标签包裹。

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

    其中,<template></template>通常建立我们要用的网页界面,<script></script>通常与数据打交道,定义数据的首发方式等,面向逻辑,而<style></style>主要负责<template></template>标签中的样式。

    上面三者的结合,就构成了我们所见到的网页,一般我们在开发新的页面中一般是建立一个新的.vue文件,在文件中完成三个环节的编写。

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
    
      name: "app"
    };
    </script>
    <style>
    .add-container {
      margin-bottom: 20px;
    }
    </style>

    补充:

    【template】

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

    <router-view></router-view>是子路由视图,后面的路由页面都显示在此处

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

    【script】

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

    【style】

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

    如要引入外部css文件,首先需给项目安装css-loader依赖包,打开cmd,进入项目目录,输入npm install css-loader,回车。安装完成后,就可以在style标签下import所需的css文件。这样,我们就可以把style下的样式封装起来,写到css文件夹,再引入到页面使用,整个vue页面也看上去更简洁。

    <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({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }     /*此处为引入的根组件的App.vue*/
    })

     

    router.js---路由配置

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

    import Vue from 'vue'    /*引入vue框架*/
    import Router from 'vue-router'   /*引入路由依赖*/
    import Hello from ‘@、components/Hello’    /*引入页面组件,命名为Hello*/
    
    Vue.use(Router)   /*使用路由依赖*/
    
       /*定义路由*/
    export default new Router({
      router:[
       {
           path: '/ ',
           name: 'Hello',
           component: Hello
        }
     ]
    })    

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

     

    大致是这些内容,在下一篇总结一下个文件之间的调用思路吧!

     

    转载于:https://www.cnblogs.com/chenleideblog/p/10432375.html

    展开全文
  • vue2.0项目结构说明

    2020-12-21 11:30:07
    vue项目结构说明 build文件夹 这个文件夹主要是进行webpack的一些配置 webpack.base.conf.js webpack基础配置,开发环境,生产环境都依赖 webpack.dev.conf.js webpack开发环境配置 webpack.prod.conf.js webpack...

    vue2.0项目结构说明

    build文件夹

    这个文件夹主要是进行webpack的一些配置

     webpack.base.conf.js    webpack基础配置,开发环境,生产环境都依赖
     webpack.dev.conf.js     webpack开发环境配置
     webpack.prod.conf.js    webpack生产环境配置
     build.js                生产环境构建脚本      
     vue-loader.conf.js      此文件是处理.vue文件的配置文件
    

    config文件夹

     dev.env.js    配置开发环境 
     prod.env.js   配置生产环境 
     index.js      这个文件进行配置代理服务器,例如:端口号的修改 
    

    node_modules文件夹

    存放npm install时根据package.json配置生成的npm安装包的文件夹

    src文件夹

    源码目录(开发中用得最多的文件夹)

     assets       共用的样式、图片 
     components   业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件
     router       设置路由   
     App.vue      vue文件入口界面 
     main.js      对应App.vue创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置  
    

    static文件夹

    存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置,对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用

    package.json

    这个文件有两部分是有用的:scripts 里面设置命令以及在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包

    展开全文
  • 最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供...
  • 上一章节,通过Pycharm创建了一个新的Vue项目,获得如下图所示的初始化Vue项目目录,为了保持结构一致、便于理解和构建管理,后续的学习和开发也将遵循Vue相关的目录结构规范进行。 提示:从 vue-cli3.0 开始 ...
  • vue项目结构记录

    2019-03-13 17:24:00
    vue项目结构 不知道大家有没这样的情况,面对刚配置好的脚手架,创建的文件不知道该放哪个文件下,导致后面开发一些文件不好找,不利于维护。 接下来我说说我项目中的一些文件: 首先是components组件文件 ...
  • vue项目开发的目录结构 一、通过命令行工具安装vue(npm install webpack vue-project)     build -- 项目构建的相关代码 config -- 配置目录,包括端口、环境等的配置 src -- 开发的主要目录...
  • Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service),该...
  • vue其他篇 01: vue.js安装 02: vue.js常用指令 03: vuejs 事件、模板、过滤器 ...1.3 项目整体结构开发 1.4 项目简化版 1.1 初始化项目 返回顶部  1、初始化项目  vue init webpack itany  cd it...
  • vue项目目录结构

    2019-03-03 08:37:00
    VUE项目目录结构 如上图所示,我们的目录结构就是这样的了。 目录/文件说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。 config 配置目录,...
  • vue项目结构

    2017-12-18 03:28:03
    vue项目结构 一,文件结构 除开src文件夹,其他文件夹都是vue-cli自动生成的(从github下载) 1,build webpack基础配置文件夹 2 config 暴露出来的参数配置(生产/开发环境的公共变量控制以及为了解决跨域而设立的...
  • 初始项目结构如上所示。src: 写代码地方,我们大部分的操作都在此 static :资源目录 static目录下还可以放一些第三方的js库,通用的css等,这样每次打包的时候节省打包时间 转载于:...
  • vue项目目录结构详解

    2020-06-02 16:14:05
    vue项目目录结构详解 项目简介 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、scss 等最新语言特性。项目包含: 基础库: vue.js、vue-router、vuex、whatwg-fetch 编译...
  • Vue项目目录结构

    2019-04-20 20:17:37
    vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。 vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。   总体框架 一个vue-cli的项目结...
  • MyComponent.vue 基础组件名,应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。 components/ |-BaseButton.vue |-BaseTable.vue ...
  • 下图为Vue项目文件夹: 以下就项目文件夹中的各文件的作用进行介绍: ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── config/ # Vue基本配置文件,可以设置监听端口,打包...
  • 项目介绍 qtum-web-wallet 是量子链推出的网页版钱包。 ... 项目采用vue搭建。...通过网页可以实现钱包的创建备份...项目结构 这个vue项目采用了vue-loader,所以整体用的是嵌套结构。 build 构建脚本,还包括开发...
  • vue项目目录结构说明

    2020-08-17 14:48:38
    这是要一个最基本的vue项目结构 具体的目录解析看下面的表格 buiuld: 项目构建(webpack)相关代码 config: 目录/文件 说明 build 项目构建(webpack)相关代码 config node_modules: npm 加载的项目依赖模块 src: ...
  • § 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── assets/ # 放置需要经由 Webpack 处理的静态文件 │ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,234
精华内容 893
关键字:

vue开发项目结构

vue 订阅