精华内容
下载资源
问答
  • vscode下vue项目结构分析

    千次阅读 2019-11-18 19:12:18
    得到的vue项目结构如下 接下来就好好分析一下各个文件的用途 1.npm相关文件 node_modules npm是一个包管理器,可以安装很多别人的包,那么我们安装的包呢就放在node_modules里面 package.json ...

    我是用脚手架cli 4.0.5版本创建的vue项目
    在这里插入图片描述
    得到的vue的项目结构如下
    在这里插入图片描述
    接下来就好好分析一下各个文件的用途


    1.npm相关文件

    在这里插入图片描述

    • node_modules
      npm是一个包管理器,可以安装很多别人的包,那么我们安装的包呢就放在node_modules里面
    • package.json
      在这里插入图片描述
      我们安装了哪些包会在package.json里面做记录
      主要存放项目依赖项的安装目录,dependencies为生产依赖,devDependencies为开发依赖
    • package-lock.json
      它是为了防止你需要重新安装项目时,下的包版本不一样,这里记录了你下载的包的详细信息,锁住版本号,防止出现因为版本不一样带来的问题

    2.写项目的源码文件

    在这里插入图片描述

    • src(source的简写)
      这里放的就是你写项目用的源码了,这里的内容就都是你写的并且和你项目相关的内容
    • assets
      在这里插入图片描述
      放一些静态资源,比如常用的图片
    • components(组件)
      在这里插入图片描述
      放一些vue的组件,vue是用组件化的思想来写页面的,也就是一个页面是由很多大大小小的组件组合而成的,components是小组件,一般写一些功能组件啥的
    • router(路由)
      在这里插入图片描述
      整个vue项目的路由,vue 是单页面应用的代表,这里面就是设置一个一个组件的地址的文件。决定了页面的跳转规则。
    • store
      好像是和vue-x有关的,我才上路,没学到,先不管
    • views
      在这里插入图片描述
      页面组件,里面存放的都是一个一个单个的页面。它相对于components来说,它是大组件,它能引用小组件。
    • App.vue
      根组件。所有的页面都是app.vue下面切换的,可以理解为所有组件都是app.vue的子组件,可以把头部底部每个页面都出现的文件都放在app.vue里面,以及在里面写公用的css代码。
    • main.js
      这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义。
      并且也是对所需要插件的引用。

    3.public

    在这里插入图片描述
    可以在浏览器地址栏范围public文件夹里面的东西,经常把一下需要用户下载的东西放到这里。

    • index.html
      在这里插入图片描述
      项目的承载页面,项目的入口页面而已

    项目加载的过程是index.html->main.js->app.vue->/router/index.js->helloworld.vue。

    参考链接:
    https://blog.csdn.net/chao2458/article/details/81284522
    https://blog.csdn.net/weixin_40881970/article/details/85159795
    https://www.jianshu.com/p/31ed2f50aa88
    https://blog.51cto.com/14041091/2308776
    https://www.jianshu.com/p/2769efeaa10a
    https://www.zhihu.com/collection/361449373
    https://segmentfault.com/q/1010000016759573
    https://blog.csdn.net/AI_U20/article/details/88531065

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

    main.js --->找到index.html中的挂载位置--->找到app.vue中的挂载内容

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

    原文:https://www.cnblogs.com/chenleideblog/p/10432375.html

    最近做一些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

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

    主要作用是初始化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文件,即为路由配置文件。

    参考:https://www.cnblogs.com/knuzy/p/11374530.html

    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: '/login',
            name: 'login',
            component: login,
            meta: {
                title: '登录页'
            },
        },
        {
            path: '/register',
            component: Register,
            meta: {
                title: '注册页'
            }
        },
        {
            path: '/403',
            component: noPerm
        },
        {
            path: '/',
            name: 'index',
            component: Main,
            meta: {
                title: '首页',
                // perm: true //设置权限(测试)
            }
     ]
    })    

     

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

     

    调用关系

    è¿éåå¾çæè¿°

    在webpack的配置文件里,设置了main.js是入口文件,我们的项目默认访问index.html,这个文件里面<div id="app"></div>和App.vue组件里面的容器完美的重合了,也就是把组件挂载到了index页面,然后我们只需要去建设其他组件就好了,在App组件中我们也可以引入,注册,应用其他组件,后面我会介绍如何通过路由将其他组件渲染在App组件,这样我们就只需要去关注每个组件的功能完善。

    就是说vue的默认页面是index.html,index中的<div id="app"></div>挂载了App.vue这个大组件,然后所有的其他子组件(hello.vue等)都归属在App.vue这个主组件下。

    main.js 是入口文件,作用是初始化vue实例并使用需要的插件(router等)

     

    关于Vue中main.js,App.vue,index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到:

     

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

    App.vue---根组件

    main.js---入口文件

    那么这几个文件之间的联系如何呢?

    1.先看index.html中的内容:(为了很好的标识各个文件,我对各文件进行了文字标记)

    2.在App.vue中,我做了如下处理:

    3.在main.js中,文件初始内容如图:

     

    那么我们打卡的网页如何呢?

    网页效果如下:

    也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分

    那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,

    而index.html中

    1

    <div id="app">来自index.html正文中的内容</div>

     上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上

     main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过

    new Vue({
      el: '#app',
      //components: {App },
      //template: '<App/>'
    })
    

    告诉该实例要挂载的地方;(即实例装载到index.html中的位置)

    接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢?

     

    import App from './App.vue'
    
    new Vue({
      //el: '#app',
      components: {App },
      //template: '<App/>'
    })

    这个局部组件是当前目录下的App.vue;

    而起模板是什么呢?模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容)

     所以Vue这个实例就是战士的是App.vue这个组件的内容

     所以,我们进行总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

    而index.html中的Title部分不会被取代,所以会一直保留。

     

     

    https://www.cnblogs.com/huangfeihong/p/9141273.html

    单元测试:https://blog.csdn.net/qq_34046456/article/details/89602289

     

     

    展开全文
  • 项目介绍 qtum-web-wallet 是量子链推出的网页版钱包。 ... 项目采用vue搭建。...通过网页可以实现钱包的创建备份...项目结构 这个vue项目采用了vue-loader,所以整体用的是嵌套结构。 build 构建脚本,还包括开发...

    项目介绍

    qtum-web-wallet 是量子链推出的网页版钱包。

    项目地址 https://github.com/qtumproject/qtum-web-wallet

    这里写图片描述

    项目采用vue搭建。

    通过网页可以实现钱包的创建备份转账以及智能合约的部署调用功能。

    这里写图片描述

    项目结构

    这里写图片描述

    这个vue项目采用了vue-loader,所以整体用的是嵌套结构。

    • build 构建脚本,还包括开发时候用的服务器配置
    • config 项目环境配置,区分开发环境和生产环境
    • dist 项目编译后导出的文件,部署生产环境的时候会用到
    • docs 项目内的说明文档,跟代码无关
    • src
      • assets 项目资源文件
      • components vue的组件文件,可以重复使用
      • controllers 对应项目的每个逻辑页面
      • libs 项目用到的封装的函数库
    • locales i18n国际化用到的语言字库文件

    一些技术点

    vue-i18n 国际化

    官方文档的操作见后面的参考资料。

    下面看这个项目是怎么做的。

    引入库和配置文件

    package.json 中的devDependencies引入"vue-i18n": "^7.4.2"

    Vue.js中引入import i18n from 'libs/i18n'

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import locales from 'locales'
    import config from 'libs/config'
    
    Vue.use(VueI18n)
    
    export default new VueI18n({
      locale: config.getLan(),
      fallbackLocale: 'zh',
      messages: locales.messages,
    })
    

    展示内容

    在模板中,写法为{{ $t('create.title') }}

    获取配置

    src/lib/config.js

      getLan() {
        let locale = this.get('lan')
        navigator.languages.forEach(language => {
          if (locale === undefined && locales.locales.indexOf(language) !== -1) {
            locale = language
          }
        })
        if (locale === undefined) {
          locale = 'en'
        }
        return locale
      },

    更改配置

    src/controllers/Config.vue

    save: function() {
          config.set('lan', this.lan)
          config.set('network', this.network)
          config.set('mode', this.mode)
          window.location.reload()
        }

    build 构建项目

    package.json

      "scripts": {
        "dev": "node build/dev-server.js",
        "start": "node build/dev-server.js",
        "build": "node build/build.js"
      },

    会执行node build/build.js

    require('./check-versions')()  //引入版本检测文件
    
    process.env.NODE_ENV = 'production' //设定为生产模式
    
    var ora = require('ora')  //引入ora
    var rm = require('rimraf')  //node的rm -rf ,删除文件
    var path = require('path') 
    var chalk = require('chalk') //Log格式工具可以指定颜色什么的
    var webpack = require('webpack') //打包工具
    var config = require('../config')
    var webpackConfig = require('./webpack.prod.conf')
    
    var spinner = ora('building for production...')
    spinner.start() 
    
    rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
      if (err) throw err
      webpack(webpackConfig, function (err, stats) {
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({
          colors: true,
          modules: false,
          children: false,
          chunks: false,
          chunkModules: false
        }) + '\n\n')
    
        if (stats.hasErrors()) {
          console.log(chalk.red('  Build failed with errors.\n'))
          process.exit(1)
        }
    
        console.log(chalk.cyan('  Build complete.\n'))
        console.log(chalk.yellow(
          '  Tip: built files are meant to be served over an HTTP server.\n' +
          '  Opening index.html over file:// won\'t work.\n'
        ))
      })
    })
    

    ora,就是build的时候那个会动的图标。 这里写图片描述

    重点还是在生产环境的文件中

    var path = require('path')
    var utils = require('./utils')
    var webpack = require('webpack')
    var config = require('../config')
    var merge = require('webpack-merge')
    var baseWebpackConfig = require('./webpack.base.conf')
    var CopyWebpackPlugin = require('copy-webpack-plugin')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var ExtractTextPlugin = require('extract-text-webpack-plugin')
    var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    var FaviconsWebpackPlugin = require('favicons-webpack-plugin')
    
    var env = config.build.env
    
    var webpackConfig = merge(baseWebpackConfig, {
      module: {
        rules: utils.styleLoaders({
          sourceMap: config.build.productionSourceMap,
          extract: true
        })
      },
      devtool: config.build.productionSourceMap ? '#source-map' : false,
      output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },
      plugins: [
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
          'process.env': env
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          },
          sourceMap: true,
          mangle: {
            except: ['BigInteger', 'ECPair', 'Point']
          }
        }),
        // extract css into its own file
        new ExtractTextPlugin({
          filename: utils.assetsPath('css/[name].[contenthash].css')
        }),
        // Compress extracted CSS. We are using this plugin so that possible
        // duplicated CSS from different components can be deduped.
        new OptimizeCSSPlugin({
          cssProcessorOptions: {
            safe: true
          }
        }),
        // generate dist index.html with correct asset hash for caching.
        // you can customize output by editing /index.html
        // see https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
          filename: config.build.index,
          template: 'index.html',
          inject: true,
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            // more options:
            // https://github.com/kangax/html-minifier#options-quick-reference
          },
          // necessary to consistently work with multiple chunks via CommonsChunkPlugin
          chunksSortMode: 'dependency'
        }),
        new FaviconsWebpackPlugin({
          logo: 'assets/images/logo.png',
          inject: true,
          title: 'Qtum Web Wallet',
          icons: {
            android: true,
            appleIcon: true,
            appleStartup: false,
            favicons: true
          }
        }),
        // keep module.id stable when vender modules does not change
        new webpack.HashedModuleIdsPlugin(),
        // split vendor js into its own file
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: function (module, count) {
            // any required modules inside node_modules are extracted to vendor
            return (
              module.resource &&
              /\.js$/.test(module.resource) &&
              module.resource.indexOf(
                path.join(__dirname, '../node_modules')
              ) === 0
            )
          }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
          name: 'manifest',
          chunks: ['vendor']
        }),
        // copy custom static assets
        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
          }
        ])
      ]
    })
    
    if (config.build.productionGzip) {
      var CompressionWebpackPlugin = require('compression-webpack-plugin')
    
      webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
          ),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
    
    if (config.build.bundleAnalyzerReport) {
      var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    
    module.exports = webpackConfig
    

    开发阶段和部署生产环境

    开发阶段

    本地安装

    xiaoyu@LIXIAOYUdeMacBook-Pro.com➤ npm install
    
    > fsevents@1.1.2 install /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/fsevents
    > node install
    
    [fsevents] Success: "/xiaoyu/qtumprojects/qtum-web-wallet/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
    Pass --update-binary to reinstall or --build-from-source to recompile
    
    > phantomjs-prebuilt@2.1.15 install /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt
    > node install.js
    
    PhantomJS not found on PATH
    Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-macosx.zip
    Saving to /var/folders/p6/3j5thk4j0972fw32188xdns80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
    Receiving...
      [========================================] 100%
    Received 16746K total.
    Extracting zip contents
    Removing /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom
    Copying extracted folder /var/folders/p6/3j5thk4j0972fw32188xdns80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1520400588975/phantomjs-2.1.1-macosx -> /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom
    Writing location.js file
    Done. Phantomjs binary available at /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
    added 1220 packages in 685.142s

    运行,注意开发阶段跑的是dev

    /xiaoyu/qtumprojects/qtum-web-wallet git:(master) [13:51:56]
    xiaoyu@LIXIAOYUdeMacBook-Pro.com➤ npm run dev
    
    > qtum-wallet@1.0.0 dev /xiaoyu/qtumprojects/qtum-web-wallet
    > node build/dev-server.js
    
    > Starting dev server...
    
    
     WARNING  Compiled with 1 warnings                                                                                                                                                                                      1:54:48 PM
    
     warning  in ./src/controllers/RestoreMobile.vue
    
    (Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
    
     @ ./src/controllers/RestoreMobile.vue 7:0-357
     @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
     @ ./src/App.vue
     @ ./src/main.js
     @ multi ./build/dev-client ./src/main.js
    
    > Listening at http://localhost:8081

    部署生产环境

    开发环境的dev,运行的是项目自带的服务器,并且只要有文件更改,就会刷新,对于开发来讲很方便。

    但是,上面运行着大量的辅助工具,导致整个项目运行的速度会变慢。

    /xiaoyu/qtumprojects/qtum-web-wallet git:(master *) [14:10:39]
    xiaoyu@LIXIAOYUdeMacBook-Pro.com➤ npm run build
    
    > qtum-wallet@1.0.0 build /xiaoyu/qtumprojects/qtum-web-wallet
    > node build/build.js
    
    ⠦ building for production...
    Starting to optimize CSS...
    Processing static/css/app.f1e81e8b885d40d5da38b1583c218b18.css...
    Processed static/css/app.f1e81e8b885d40d5da38b1583c218b18.css, before: 301826, after: 301758, ratio: 99.98%
    Hash: c444e4b2e6127e14174b
    Version: webpack 2.7.0
    Time: 38636ms
                                                      Asset     Size  Chunks                    Chunk Names
                   static/js/vendor.6b97dce258230f7e63ba.js  1.05 MB       0  [emitted]  [big]  vendor
                      static/js/app.6d3e646af7951a9ecaab.js   226 kB       1  [emitted]         app
                 static/js/manifest.fb70284a5dffe96a9b58.js  1.51 kB       2  [emitted]         manifest
        static/css/app.f1e81e8b885d40d5da38b1583c218b18.css   302 kB       1  [emitted]  [big]  app
               static/js/vendor.6b97dce258230f7e63ba.js.map  6.25 MB       0  [emitted]         vendor
                  static/js/app.6d3e646af7951a9ecaab.js.map   848 kB       1  [emitted]         app
    static/css/app.f1e81e8b885d40d5da38b1583c218b18.css.map   351 kB       1  [emitted]         app
             static/js/manifest.fb70284a5dffe96a9b58.js.map  14.6 kB       2  [emitted]         manifest
                                                 index.html  2.09 kB          [emitted]         
    
      Build complete.
    
      Tip: built files are meant to be served over an HTTP server.
      Opening index.html over file:// won't work.

    bulid之后的,将dist文件夹内的文件放到http服务器,比如apache nginx .就可以了。

    这里写图片描述

    参考资料

    展开全文
  • 文章目录一,以一个目录树状结构进行展示二,package.json三,项目里边还有一个非常重要的文件main.ts文件,你可以把它叫做入口文件,这里边只有简单的三行代码。 一,以一个目录树状结构进行展示 |-node_modules -- ...

    一,以一个目录树状结构进行展示

    |-node_modules       -- 所有的项目依赖包都放在这个目录下
    |-public             -- 公共文件夹
    ---|favicon.ico      -- 网站的显示图标
    ---|index.html       -- 入口的html文件
    |-src                -- 源文件目录,编写的代码基本都在这个目录下
    ---|assets           -- 放置静态文件的目录,比如logo.pn就放在这里
    ---|components       -- Vue的组件文件,自定义的组件都会放到这
    ---|App.vue          -- 根组件,这个在Vue2中也有
    ---|main.ts          -- 入口文件,因为采用了TypeScript所以是ts结尾
    ---|shims-vue.d.ts   -- 类文件(也叫定义文件),因为.vue结尾的文件在ts中不认可,所以要有定义文件
    |-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件,作用是设置兼容性
    |-.eslintrc.js       -- Eslint的配置文件,不用作过多介绍
    |-.gitignore         -- 用来配置那些文件不归git管理
    |-package.json       -- 命令配置和包管理文件
    |-README.md          -- 项目的说明文件,使用markdown语法进行编写
    |-tsconfig.json      -- 关于TypoScript的配置文件
    |-yarn.lock          -- 使用yarn后自动生成的文件,由Yarn管理,安装yarn包时的重要信息存储到yarn.lock文件中
    

    二,package.json

    上两节课你可以使用npm run serveyarn serve查看项目效果,就是因为有package.json中的scripts起到了作用。先来看一下这三条命令。

    {
      //----
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      //----
    }
    

    能使用vue-cli-service是因为vue-cli自动安装了cli-service这个工具,此处可以在devDependencies中看出哦。
    这三个命令的意思是:

    serve : 在开发时用于查看效果的命令,视频中演示看一下效果
    build : 打包打码,一般用于生产环境中使用
    lint : 检查代码中的编写规范
    

    我们顺便讲一下package.json中另外两个比较重要的配置项

    dependencies和devDependencies。

    这两个都是用来记录安装包信息的,但如果要想完全搞清楚他们的区别,你先要弄清楚什么是开发环境和生产环境。

    开发环境: 作为一个程序员,每天作的事情都是在开发环境中,编写代码、测试代码、修改 Bug。也就说这些代码没有上线。

    生产环境:就是代码已经上线,放到了正式的服务器上,公司开始运营去赚钱的代码。

    明白了这两个概念后,dependencies下的包是生产环境中必须用到的,当然开发环境也需要。devDependencies是只有开发环境中使用的,上线后这些包就没用了,打包后也不会打包进去的代码。

    三,项目里边还有一个非常重要的文件main.ts文件,你可以把它叫做入口文件,这里边只有简单的三行代码。

    import { createApp } from "vue"; // 引入vue文件,并导出`createApp`
    import App from "./App.vue"; // 引入自定义组件,你在页面上看的东西基本都在这个组件里
    
    createApp(App).mount("#app"); // 把App挂载到#app节点上,在public目录下的index.html找节点
    
    展开全文
  • 使用vue开发项目时进行权限判断

    千次阅读 2019-08-12 15:45:41
    使用vue开发项目时进行权限判断 本文通过使用vue-element-admin以及iview-admin整理得出,侵删。 路由表 路由表 路由目录结构: systemUser.js //封装好的localstorge方法 import { getLocalStorage } from '../.....
  • vue2.0 开发环境搭建 + 创建项目1、安装nodejs环境 检查Node.js是否安装成功:node –version 参考文档:nodejs详细安装步骤 2、全局安装淘宝镜像npm install -g cnpm --registry=...
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view ...
  • vue项目开发的目录结构

    千次阅读 2018-03-28 18:55:02
    vue项目开发的目录结构一、通过命令行工具安装vue(npm install webpack vue-project) build -- 项目构建的相关代码config -- 配置目录,包括端口、环境等的配置src -- 开发的主要目录 -- asset : 放置一些...
  • VUE项目目录结构介绍

    2018-10-25 19:39:19
    VUE项目目录结构介绍 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹,基本上文件都应该放在这里。 —assets 资源...
  • 碰巧总有人问我路由配置以及项目结构问题,所以就来整理一些东西,只是一些随笔,方便自己以后查看。有不足之处,或者您有更好的方案,希望您不吝啬教给我。可留言,可加qq:979976770(非工作日,不上QQ,请勿骚扰...
  • 使用Vue开发项目,同时不用Node,实现浏览器访问>> 第一步. 准备资源 项目结构目录如下 [jQuery.js并没有用到] 以下资源下载,部分可直接下载,部分需要访问然后复制下载,当然也可以使用CDN fonts ttf下载 ...
  • vue开发项目

    2019-09-05 10:34:40
    vue开发老项目一、原项目结构二、技术栈三、需求四、改造后的页面五、request.js 接口文件 一、原项目结构 html css js images font 没有项目管理工具 二、技术栈 js + jquery 三、需求 在老项目的基础上,增加...
  • 一、总结一下vue项目的总体结构以及vue项目常用的一些插件和一些项目技巧。 ** **         从现在做的几个vue项目上来看,总的来说,一次比一次有进步,项目结构一次比一...
  • Vue单页开发项目搭建

    千次阅读 2017-11-27 14:20:32
    公司新项目开发要使用vue框架,自学了一下vue单页开发,分享一下vue单页项目搭建的学习效果,主要使用vue脚手架 vue-cli 和 vue全家桶(vuevue-router、vuex、vue-resource/axios),很多地方不了解,大家多多指点...
  • vue 项目文件结构

    千次阅读 2019-04-11 20:25:42
    用 webpack npm 的方式安装vue项目后,初始文件夹如下 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。 config 配置目录,默认配置没有问题,所以...
  • vue-cli项目结构详解

    万次阅读 多人点赞 2017-12-22 11:41:44
    Vue-cli是vue官方出品的快速构建单页...下面开始对vue-cli生成的项目结构进行一下简单的解读,这个解读只是本人在项目中应用vue-cli的一些个人见解和总结,只针对一些刚入门vue的人,本人是菜鸟,如有不对请大神不吝赐
  • Vue项目结构介绍

    千次阅读 2017-10-19 12:35:00
    作者:阿安 ... 来源:知乎 著作权归作者所有。商业转载请联系作者...我们(凡普信贷)的移动端页面正在使用 vue2.0 重构,在基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施
  • vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新  vue-cli提供了一套本地的热加载的测试服务器  vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 安装 下面来安装vue-...
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。
  • Vue项目目录结构说明

    千次阅读 2018-08-26 15:04:50
    vue项目结构图 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹,基本上文件都应该放在这里...
  • vue开发:vue目录结构

    千次阅读 2017-07-13 10:52:28
    作者:阿安 链接:...来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 ...目录结构 ├── index.html 入口页面 ├── build
  • 作为一个小白,我们经常会迷惘webpack+vue项目究竟要怎样的呢?本次的文章就是为了解答这个问题的,跟着本文的思路你可以很轻易和明白一个简单的webpack+vue项目是怎样构建和运行起来的。源码地址 成果图: 图...
  • vue开发实例

    2019-02-21 17:13:19
    vue开发实例,主要包括后端请求接口的封装,和vue基本用法
  • Vue进阶(二):Vue 项目文件结构介绍

    千次阅读 多人点赞 2018-05-05 13:08:28
    Vue进阶(二):Vue项目文件结构介绍 main.js是我们的主项目入口文件,主要作用是初始化vue实例,并引入所需要的插件; App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由...
  • 说明:文件夹=黄色,文件=绿色 文件夹 说明 包含内容 包含内容说明 build webpa相关配置,或构建脚本的... 开发服务器的热重载文件,实现开发阶段页面的自动刷新功能 dev-server.js 运行本地...
  • 搭建一个vue项目vue项目各配置文件作用和个人vue项目开发总结 流程如下: 一.安装node.js 1).在node.js 官网中下载安装包 2).打开下载完的NodeJs文件 3).在文件目录下建立”node_global“及”node_cache“两个...
  • vue项目目录结构

    千次阅读 2017-05-16 16:58:18
    详细的厘清一下这个项目结构,然后我们要从哪里开始等。 项目目录以及文件结构。 如上图所示,我们的目录结构就是这样的了。 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,...
  • Vue项目开发规范

    千次阅读 2019-06-10 18:48:59
    本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了让大家书写...
  • Vue.js教程-Vue项目的目录结构和.vue文件的构成

    千次阅读 多人点赞 2020-07-28 00:59:54
    Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...
  • 如何开发vue项目

    千次阅读 2019-07-09 16:21:33
    1、为什么要使用vue ...2、使用vue开发项目的流程 全家桶:vue + vue-router + element-ui/iview/mint-ui/vant + axios/fetch + vuex + mock 2.1 软件开发的生命周期 --- 《软件工程》 (1)问...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,580
精华内容 19,832
关键字:

vue开发项目结构

vue 订阅